CSS’deki her şeyin etrafında bir kutu bulunur. Bu kutuları anlamak CSS ile mizanpajlar oluşturabilmenin veya öğeleri diğer öğelerle hizalamanın anahtarıdır. Aşağıdaki yazıda kutu modelinin nasıl çalıştığına ve ilgili terminolojiye detaylı bir şekilde bakacağız.
Blok ve satır içi kutular
CSS’de genel olarak iki tür kutumuz var – blok kutular ve satır içi kutular. Bu özellikler, kutunun sayfa akışı ve sayfadaki diğer kutulara göre nasıl davrandığını gösterir. Kutuların ayrıca bir iç görüntü türü ve bir dış görüntü türü bulunur. Öncelikle blok kutu ve satır içi kutu ile ne demek istediğimizi açıklayalım. Daha sonra iç ve dış görüntü tipinin ne anlama geldiğine bakalım.
Bir kutunun dış görüntüleme türü block
ise, aşağıdaki şekillerde davranır:
- Kutu yeni bir satıra geçer.
- Kutu, kabındaki mevcut alanı doldurmak için satır içi yönde uzar. Çoğu durumda bu, kutunun kabı kadar geniş olacağı ve mevcut alanın %100’ünü dolduracağı anlamına gelir.
width
veheight
özelliklerine saygı gösterilir.- Dolgu, kenar boşluğu ve kenarlıklar diğer öğelerin kutudan uzağa itilmesine neden olur
<h1>
ve <p>
gibi bazı HTML öğeleri varsayılan dış görüntüleme türü olarak block
kullanılır.
Bir kutunun dış görüntüleme türü inline
ise, o zaman:
- Kutu yeni bir satıra geçmez.
width
veheight
özellikleri geçerli olmaz.- Dikey dolgu, kenar boşlukları ve kenarlıklar uygulanır ancak diğer satır içi kutuların kutudan uzaklaşmasına neden olmaz.
- Yatay dolgu, kenar boşlukları ve kenarlıklar uygulanacak ve diğer satır içi kutuların kutudan uzaklaşmasına neden olacaktır.
<a>
, <span>
, <em>
ve <strong>
gibi bazı HTML öğeleri varsayılan dış görüntüleme türü olarak inline
kullanır.
Bir elemana uygulanan kutu tipi display
ile tanımlanır. display
‘in dış görünüm değerleri block
ve inline
‘dır.
İç ve dış display
türleri
Bu noktada iç ve dış görünüm türlerini de açıklamakta fayda var. Yukarıda bahsedildiği gibi, CSS’deki kutular, kutunun blok veya satır içi olup olmadığını ayrıntılandıran bir dış görüntü tipine sahiptir.
Kutuların ayrıca, o kutunun içindeki öğelerin nasıl yerleştirileceğini belirleyen bir de iç ekran türü vardır. Varsayılan olarak, bir kutunun içindeki öğeler normal akışta düzenlenir, yani diğer blok ve satır içi öğeler gibi davranırlar (yukarıda açıklandığı gibi).
Ancak, display:flex
gibi değerleri kullanarak iç görüntü türünü değiştirebiliriz. Bir öğeye display:flex;
verirsek, dış görüntü tipi block
olduğu halde iç görüntü tipi flex
olarak değiştirilir. Bu kutunun herhangi bir doğrudan alt öğeleri de flex öğeler olacaktır.
CSS Düzeni ile ilerlemeye devam ettikçe flex
kutularınızın sahip olabileceği çeşitli diğer iç değerlerle de karşılaşacaksınız, örneğin grid
.
Bununla birlikte, blok ve satır içi düzen, web’deki öğelerin varsayılan davranış şeklidir – yukarıda söylediğimiz gibi, bu, bazen normal akış olarak adlandırılır. Başka bir talimat olmadan kutularımız blok veya satır içi kutular olarak düzenlenir.
Farklı ekran türlerine örnekler
Devam edelim ve bazı örneklere bakalım. Aşağıda, tümü bir dış görüntüleme türüne sahip olan üç farklı block
HTML öğemiz var. İlki CSS’de kenarlık eklenmiş bir paragraf. Tarayıcı bunu bir blok kutusu olarak işler, böylece paragraf yeni bir satırda başlar ve mevcut olan tam genişliğe genişler.
İkincisi, display: flex
kullanılarak düzenlenen bir liste. Bu, kap içindeki öğeler için esnek bir düzen oluşturur, ancak listenin kendisi bir blok kutudur ve – paragraf gibi – tam kap genişliğine genişler ve yeni bir satıra geçer.
Bunun altında, içinde iki <span>
öğe olan blok düzeyinde bir paragrafımız var. Bu elemanlar normalde inline
olmalı, ancak elemanlardan birinin display:block
içeren bir blok sınıfı var.
p,
ul {
border: 2px solid rebeccapurple;
padding: .5em;
}
.block,
li {
border: 2px solid blue;
padding: .5em;
}
ul {
display: flex;
list-style: none;
}
.block {
display: block;
}
<p>I am a paragraph. A short one.</p>
<ul>
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
</ul>
<p>I am another paragraph. Some of the <span class="block">words</span> have been wrapped in a <span>span element</span>.</p>

Bir sonraki örnekte inline
öğelerin nasıl davrandığını görelim. İlk paragraftaki <span>
elemanları varsayılan olarak satır içidirler ve böylece yeni satır oluşturmazlar.
Ayrıca, bazı esnek öğelerin etrafında bir satır içi kutu oluşturan, display: inline-flex
olarak ayarlanmış bir <ul>
öğemiz var.
Son olarak, her ikisi de display: inline
olarak ayarlanmış iki paragrafımız var. Satır içi esnek kap ve paragrafların tümü yeni satırlara bölünmek yerine tek bir satırda birlikte çalışır.
Aşağıdaki örneği yerel makinanıza kaydedip, öğelerin display
değerlerini değiştirmeyi deneyin.
p,
ul {
border: 2px solid rebeccapurple;
}
span,
li {
border: 2px solid blue;
}
ul {
display: inline-flex;
list-style: none;
padding: 0;
}
.inline {
display: inline;
}
<p>
I am a paragraph. Some of the
<span>words</span> have been wrapped in a
<span>span element</span>.
</p>
<ul>
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
</ul>
<p class="inline">I am a paragraph. A short one.</p>
<p class="inline">I am another paragraph. Also a short one.</p>

Bu kılavuzun ilerleyen bölümlerinde flex layout ile karşılaşacaksınız; Şimdilik hatırlanması gereken en önemli şey, display
özelliğin değerini değiştirmenin, bir kutunun dış görüntü tipinin blok veya satır içi olup olmadığını değiştirebileceğidir, bu da mizanpajdaki diğer öğelerin yanında görüntülenme şeklini değiştirir.
Yazının geri kalanında, dış ekran tipine odaklanacağız.
CSS kutu modeli nedir?
CSS kutu modeli bir bütün olarak blok kutular için geçerlidir. Satır içi kutular, kutu modelinde tanımlanan davranışların yalnızca bir kısmını kullanır. Model, bir kutunun farklı bölümlerinin – kenar boşluğu, kenarlık, dolgu ve içerik – bir sayfada görebileceğiniz bir kutu oluşturmak için birlikte nasıl çalıştığını tanımlar.
Buraya kadar oldukça basit olduğu için biraz karmaşıklık eklemek amacıyla bir standart kutu modeli ve bir de alternatif kutu modeli oluşturulmuştur.
Bir kutunun parçaları
CSS’de bir blok kutusu oluştururken şunlara sahibiz:
- İçerik kutusu :
width
veheight
gibi özellikler kullanılarak boyutlandırılabilen, içeriğinizin görüntülendiği alandır. - Dolgu kutusu : Dolgu, içeriğin etrafına beyaz boşluk olarak oturur; boyutu,
padding
ve ilgili özellikler kullanılarak kontrol edilebilir . - Kenarlık kutusu : Kenarlık kutusu, içeriği ve herhangi bir dolguyu sarar. Boyutu ve stili,
border
ve ilgili özellikler kullanılarak kontrol edilebilir . - Kenar boşluğu kutusu : Kenar boşluğu, içeriği, dolguyu ve kenarlığı bu kutu ve diğer öğeler arasında boşluk olarak saran en dış katmandır. Boyutu
margin
ve ilgili özellikler kullanılarak kontrol edilebilir .
Aşağıdaki diyagram bu katmanları göstermektedir:

Standart CSS kutu modeli
Standart kutu modelinde, bir kutuya width
ve bir height
verirseniz , bu, içerik kutusunun genişliğini ve yüksekliğini tanımlar. Ardından, kutunun kapladığı toplam boyutu elde etmek için bu genişliğe ve yüksekliğe herhangi bir dolgu ve kenarlık eklenir – aşağıdaki resme bakın.
Eğer bir kutuda width
, height
, margin
, border
, ve padding
değerleri aşağıdaki gibi tanımlanmışsa:
.box {
width: 350px;
height: 150px;
margin: 10px;
padding: 25px;
border: 5px solid black;
}
Gerçek kutunun kapladığı alan 410 piksel olur (350 + 25 + 25 + 5 + 5) ve 210px yüksekliğe sahip olur (150 + 25 + 25 + 5 + 5).

Not: Kenar boşluğu, kutunun gerçek boyutuna sayılmaz – elbette, kutunun sayfada kaplayacağı toplam alanı etkiler, yalnızca kutunun dışındaki alanı etkiler. Kutunun alanı sınırda durur – kenar boşluğuna kadar uzanmaz.
Alternatif CSS kutu modeli
Kutunun gerçek boyutunu elde etmek için kenarlık ve dolgu eklemenin oldukça zahmetli olduğunu düşünebilirsiniz ve haklısınız! Bu nedenle, CSS’nin standart kutu modelinden bir süre sonra alternatif bir kutu modeli tanıtıldı. Bu modeli kullandığımızda, herhangi bir genişlik, sayfadaki görünür kutunun genişliğidir, bu nedenle içerik alanı genişliği, bu genişlikten dolgu ve kenarlık genişliğinin çıkarılmasıyla elde edilir. Yukarıda kullanılanla aynı CSS aşağıdaki sonucu verecektir (genişlik = 350 piksel, yükseklik = 150 piksel).

Tarayıcılar varsayılan olarak standart kutu modelini kullanır. Bir eleman için alternatif modeli açmak istiyorsanız, bunu box-sizing: border-box
ayarlayarak yaparsınız. Bunu yaparak, tarayıcıya yukarıda gösterildiği gibi sınır kutusunu tanımlı alanınız olarak kullanmasını söylüyorsunuz.
.box {
box-sizing: border-box;
}
Tüm öğelerinizin alternatif kutu modelini kullanmasını istiyorsanız ve bu, geliştiriciler arasında yaygın bir seçimse, <html>
öğesinin box-sizing
özelliğini ayarlayın. Ardından aşağıdaki kod parçasında görüldüğü gibi diğer tüm öğeleri bu değeri devralacak şekilde ayarlayın.
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
Not: Geçmişten ilginç bir bilgi — Internet Explorer varsayılan olarak alternatif kutu modelini kullanıyordu ve geçiş için hiçbir mekanizma mevcut değildi.
Kutu modellerle oynama
Aşağıdaki örnekte iki kutu görüyorsunuz. Her ikisinin de .box
sınıfı var ve böylece width
, height
, margin
, border
, ve padding
özelliklerini ayarlayabiliyoruz. Tek fark, ikinci kutunun alternatif kutu modelini kullanacak şekilde ayarlanmış olmasıdır.
.box {
border: 5px solid rebeccapurple;
background-color: lightgray;
padding: 40px;
margin: 40px;
width: 300px;
height: 150px;
}
.alternate {
box-sizing: border-box;
}
<div class="box">I use the standard box model.</div>
<div class="box alternate">I use the alternate box model.</div>

Kutu modelini tarayıcı DevTools ile görüntüleyin
Tarayıcı geliştirici araçları ile kutu modelini daha kolay anlayabilirsiniz. Firefox’un DevTools uygulamasında bir öğeyi incelerseniz öğenin boyutunu, kenar boşluğunu, dolgusunu ve kenarlığını görebilirsiniz. Bir öğeyi bu şekilde incelemek, kutunuzun gerçekten düşündüğünüz boyutta olup olmadığını öğrenmenin harika bir yoludur!

Kenar boşlukları, dolgu ve kenarlıklar
Zaten margin
, padding
ve border
özelliklerini yukarıdaki örnekte görmüştük. Bu örnekte kullanılan özellikler kısayollardır ve kutunun dört tarafını da aynı anda ayarlamamıza izin verir. Bu kısayollar aynı zamanda kutunun farklı taraflarını ayrı ayrı kontrol etmeye izin veren eşdeğer uzun yollara da sahiptir.
Bu özellikleri daha ayrıntılı olarak inceleyelim.
margin – kenar boşluğu
Kenar boşluğu, kutunuzun etrafındaki görünmez bir alandır. Diğer öğeleri kutudan uzaklaştırır. Kenar boşluklarının pozitif veya negatif değerleri olabilir. Kutunuzun bir tarafında negatif bir kenar boşluğu ayarlamak, kutunun sayfadaki diğer şeylerle çakışmasına neden olabilir. İster standart ister alternatif kutu modelini kullanın, margin her zaman görünür kutunun boyutu hesaplandıktan sonra eklenir.
Bir öğenin tüm kenar boşluklarını bir kerede margin
özelliği kullanarak veya eşdeğer uzun özellikleri kullanarak her bir tarafı ayrı ayrı kontrol edebiliriz :
Aşağıdaki örnekte, kenar boşluğunun bu öğe ile içerdiği öğe arasında boşluk oluşturması veya kaldırması (negatif bir kenar boşluğuysa) nedeniyle kutunun nasıl itildiğini görmek için kenar boşluğu değerlerini değiştirmeyi deneyin.
.box {
margin-top: -40px;
margin-right: 30px;
margin-bottom: 40px;
margin-left: 4em;
}
<div class="container">
<div class="box">Change my margin.</div>
</div>

margin çökmesi
Kenar boşlukları hakkında anlaşılması gereken en önemli şey, kenar boşluğunun çökmesi kavramıdır. Kenar boşlukları birbirine değen iki öğeniz varsa ve her iki kenar boşluğu da pozitifse, bu kenar boşlukları birleşerek tek bir kenar boşluğu oluşturur. Bu kenar boşluğunun boyutu en büyük bireysel kenar boşluğuna eşit olur. Bir margin negatifse, değeri toplamdan çıkarılacaktır. Her ikisinin de negatif olduğu durumlarda, marginler daraltılacak ve en büyük değer kullanılacaktır.
Aşağıdaki örnekte iki paragrafımız var. Üst paragraf 50 piksele sahiptir., margin-bottom:50
. İkinci paragraf 30 piksele sahiptir, margin-top:30
. Kenar boşlukları birlikte daraltılmıştır, bu nedenle kutular arasındaki gerçek kenar boşluğu, iki kenar boşluğunun toplamı değil, 50 pikseldir.
Bunu, ikinci margin-top
paragrafın değerini 0’a ayarlayarak test edebilirsiniz. İki paragraf arasındaki görünür kenar boşluğu değişmez – birinci bottom-margin
paragrafta ayarlanan 50 pikseli korur. -10 piksele ayarlarsanız, toplam kenar boşluğunun 40 piksel olduğunu görürsünüz – 50 pikselden çıkarılır.
.one {
margin-bottom: 50px;
}
.two {
margin-top: 30px;
}
<div class="container">
<p class="one">I am paragraph one.</p>
<p class="two">I am paragraph two.</p>
</div>

Kenar boşluklarının ne zaman çökeceğini ve ne zaman kapanmayacağını belirleyen bir dizi kural bulunur. Şimdilik hatırlanması gereken en önemli şey, margin çökmesinin gerçekleşen bir şey olduğudur. Kenar boşlukları ile alan yaratıyor ve beklediğiniz alanı alamıyorsanız, muhtemelen gerçekleşen şey budur.
Sınırlar
Kenar boşluğu ve bir kutunun dolgusu arasına sınır çizilir. Standart kutu modelini kullanıyorsanız, sınırın boyutu kutunun width
ve height
değerine eklenir. Alternatif kutu modelini kullanıyorsanız, kenarlığın boyutu, mevcut olan alanın bir kısmını kapladığından içerik kutusunu küçültür width
ve height
.
Kenarları şekillendirmek için çok sayıda özellik bulunur — dört kenarlık vardır ve her kenarlığın işlemek isteyebileceğimiz bir stili, genişliği ve rengi vardır.
border
özelliği kullanarak dört kenarlığın tümünün genişliğini, stilini veya rengini aynı anda ayarlayabilirsiniz .
Her bir tarafın özelliklerini ayrı ayrı ayarlamak için ise şunları kullanabilirsiniz:
Tüm kenarların genişliğini, stilini veya rengini ayarlamak için aşağıdakileri kullanın:
Tek bir tarafın genişliğini, stilini veya rengini ayarlamak için daha ayrıntılı uzun yol özelliklerinden birini kullanabilirsiniz:
border-top-width
border-top-style
border-top-color
border-right-width
border-right-style
border-right-color
border-bottom-width
border-bottom-style
border-bottom-color
border-left-width
border-left-style
border-left-color
Aşağıdaki örnekte, kenarlıklar oluşturmak için çeşitli kısayollar ve uzun yol gösterimleri kullandık. Nasıl çalıştıklarını anladığınızdan emin olmak için farklı özelliklerle biraz oynayın.
.container {
border-top: 5px dotted green;
border-right: 1px solid black;
border-bottom: 20px double rgb(23,45,145);
}
.box {
border: 1px solid #333333;
border-top-style: dotted;
border-right-width: 20px;
border-bottom-color: hotpink;
}
<div class="container">
<div class="box">Change my borders.</div>
</div>

Dolgu
Dolgu, kenarlık ve içerik alanı arasında bulunur. Kenar boşluklarından farklı olarak, negatif miktarda dolguya sahip olamazsınız. Bu nedenle değer 0 veya pozitif bir değer olmalıdır. Dolgu, genellikle içeriği kenardan uzağa itmek için kullanılır. Öğenize uygulanan herhangi bir arka plan, dolgunun arkasında görüntülenecektir.
padding
özelliğini kullanarak bir öğenin tüm taraflarındaki dolguyu veya eşdeğer uzun yol özelliklerini kullanarak her taraftaki dolguyu kontrol edebiliriz :
Aşağıdaki örnekte .box
sınıfı üzerindeki padding değerlerini değiştirirseniz, bunun kutuya göre metnin başladığı yerin de değiştiğini görebilirsiniz.
Ayrıca kap ile kutu arasında boşluk bırakacak olan .container
sınıfının üzerindeki dolguyu da değiştirebilirsiniz. Dolgu herhangi bir öğe için değiştirilebilir. Kenarlık ile öğenin içindeki her şey arasında boşluk bırakacaktır.
.box {
padding-top: 0;
padding-right: 30px;
padding-bottom: 40px;
padding-left: 4em;
}
.container {
padding: 20px;
}
<div class="container">
<div class="box">Change my padding.</div>
</div>

Kutu modeli ve satır içi kutular
Yukarıdakilerin tümü tamamen blok kutuları için geçerlidir. Özelliklerden bazıları bir <span>
öğesi gibi satır içi kutulara da uygulanabilir.
Aşağıdaki örnekte, bir paragraf içinde bir <span>
var ve bu öğeye width
, height
, margin
, border
, ve padding
uyguladık. Bu öğe için genişlik ve yüksekliğin göz ardı edildiğini görebilirsiniz. Dikey kenar boşluğu, dolgu ve kenarlık dikkate alınır, ancak bu, geri kalan içeriğin satır içi kutumuzla ilişkisini değiştirmez. Bu nedenle dolgu ve kenarlık paragraftaki diğer kelimelerle çakışır. Yatay dolgu, kenar boşlukları ve kenarlıklara saygı duyulur ve diğer içeriğin kutudan uzaklaşmasına neden olur.
span {
margin: 20px;
padding: 20px;
width: 80px;
height: 50px;
background-color: lightblue;
border: 2px solid blue;
}
<p>
I am a paragraph and this is a <span>span</span> inside that paragraph. A span is an inline element and so does not respect width and height.
</p>

Ekranı kullanma: satır içi blok
display
‘in inline
ve blok
arasında bir orta yol sağlayan özel bir değeri de bulunur. Bu, bir öğenin yeni bir satıra geçmesini istemediğiniz, ancak yukarıda görülen örtüşmelere saygı duymasını ve bunlardan kaçınmasını istediğiniz durumlar için kullanışlıdır
Bir öğe, display: inline-block
öğesidir. Böyle bir öğe zaten bildiğimiz blok öğelerin bir alt kümesidir:
width
veheight
özellikleri saygı gösterilir.padding
,margin
, veborder
diğer öğelerin kutudan uzağa itilmesine neden olur.
Bununla birlikte, yeni bir satıra geçiş yapmaz ve yalnızca width
ve height
özellikleri eklediğinizde içeriğinden daha büyük olur.
Bu sonraki örnekte, <span>
elemanına display: inline-block
ekliyoruz. Bu özelliği display: block
ile değiştirmeyi deneyin.
span {
margin: 20px;
padding: 20px;
width: 80px;
height: 50px;
background-color: lightblue;
border: 2px solid blue;
display: inline-block;
}
<p>
I am a paragraph and this is a <span>span</span> inside that paragraph. A span is an inline element and so does not respect width and height.
</p>

Bunun yararlı olabileceği yer bir bağlantıya padding
ekleyerek daha büyük bir bağlantı alanı vermek istediğiniz zamandır. <a>
gibi bir satır içi öğede display: inline-block
özelliğini dolgunun ayarlanmasına izin vermek için kullanabilirsiniz, bu da kullanıcının bağlantıyı tıklamasını kolaylaştırır.
Bunu gezinme çubuklarında oldukça sık görürsünüz. Aşağıdaki navigasyon aşağıda flexbox kullanır. Biz de <a>
öğelerine dolgu ekledik. Böylece bağlantı üzerine gelince background-color
değiştirilebilir. Burada dolgu, <ul>
öğesindeki kenarlıkla örtüşüyor gibi görünüyor Bunun nedeni, <a>
‘nın bir satır içi öğe olmasıdır.
.links-list a
seçicisine display: inline-block
kuralını ekleyerek dolguya diğer öğeler tarafından saygı gösterilmesine neden olabiliriz. Aşağıdaki kodu bu şekilde düzenlemeyi deneyin.
.links-list a {
background-color: rgb(179,57,81);
color: #fff;
text-decoration: none;
padding: 1em 2em;
}
.links-list a:hover {
background-color: rgb(66, 28, 40);
color: #fff;
}
<nav>
<ul class="links-list">
<li><a href="">Link one</a></li>
<li><a href="">Link two</a></li>
<li><a href="">Link three</a></li>
</ul>
</nav>

Becerilerinizi test edin!
Bu makalede çok şey ele aldık, ancak en önemli bilgiyi hatırlayabiliyor musunuz? Devam etmeden önce bu bilgileri öğrendiğinizden emin olun.
Özet
Kutu modeli hakkında öğrenmemiz gerekenlerin çoğu bu makalede anlatıldı. Mizanpajınızda ne kadar büyük kutuların olduğu konusunda kafanız karışırsa bu yazıya geri dönmek isteyebilirsiniz.
Bir sonraki yazıda, düz kutularınızı daha ilginç hale getirmek için arka planların ve sınırların nasıl kullanılabileceğine bakacağız.