CSS'deki her şey görünmez bir kutu içerisindedir ve bu kutu modelini anlamak, CSS ile sayfa mizanpajları tasarlayabilmek için kritik öneme sahiptir. Bu derste, CSS kutu modelinin bileşenlerini ve nasıl çalıştığını inceleyeceğiz.

CSS kutu modelinin detaylarına geçmeden önce, bir web sayfasındaki içerik akışı kontrol edebilmek amacıyla CSS'te kullanılan görüntülenme biçimlerine bir göz atalım.

Bir HTML ögesinin görüntülenme biçimi, sayfanın içerik akışını doğrudan etkiler ve konumlandırma, hizalama, bölümlendirme gibi tasarımsal ihtiyaçlarınızı çözmenize olanak sağlar.

CSS'te temel olarak iki tür görüntülenme biçiminden söz edilir: block (blok), inline (satır içi).

a, img, span, em, strong vb. HTML ögeleri; varsayılan olarak satır içi biçiminde görüntülenir.

h1, p, ol, ul, li, div vb. HTML ögeleri; varsayılan olarak blok biçiminde görüntülenir.

Bir HTML ögesi, blok olarak ayarlandığında:

Metin akışını yeni bir satıra böler.
Mutlak bir genişlik değerine sahip olur. Varsayılan olarak, içinde bulunduğu HTML ögesinin genişliğini referans alır.
Mutlak, bir yükseklik değerine sahip olur. Varsayılan olarak, sahip olduğu içeriği referans alarak dikeyde genişler.

CSS'te, bir HTML ögesinin sayfa içerisindeki görüntülenme biçimini değiştirmek için display özelliği kullanılır.

Hadi! Küçük bir örnekle CSS'teki görüntülenme biçimlerinin sayfa akışına etkisini gözlemlemeye çalışalım:

CSS kutu modeli, blok HTML ögeleri için geçerlidir. Satır içi HTML ögelerinde CSS kutu modeli sınırlı bir biçimde kullanılabilir. CSS kutu modeli şu bölümlerden oluşur:

Content (İçerik): İçeriğin görüntülendiği alandır. Genişlik ve yükseklik özellikleri kullanılarak boyutlandırılabilir.
Padding (Dolgu): İçeriğin etrafını beyaz boşlukla doldurur. İçeriği, kenarlıktan ayırır.
Border (Kenarlık): İçeriği ve dolguyu sarar. Renk, stil ve kalınlık gibi özelliklerle görünümü kontrol edilebilir.
Margin (Kenar Boşluğu): İçeriği, dolguyu ve kenarları saran en dış katmandır. Kenarlıktan dışa doğru beyaz boşluk vermek için kullanılır.

Varsayılan olarak CSS kutu modelinde bir HTML ögesine width (genişlik) ve height (yükseklik) verirseniz, bu içerik kutusunun genişliğini ve yüksekliğini tanımlar. Bir kutunun sayfada kaplayacağı toplam alan; içerik, dolgu, kenarlık ve kenar boşluğu değerlerinin toplamı ile hesaplanır.

/* Bu kutunun sayfada kaplayacağı alan şu şekilde hesaplanır:
350 + 25 + 25 + 5 + 5 = 410px (Genişlik)
150 + 25 + 25 + 5 + 5 = 210px (Yükseklik) */
.kutu {
  width: 350px;
  height: 150px;
  margin: 10px;
  padding: 25px;
  border: 5px solid black;
}

box-sizing özelliğini kullanarak bir HTML ögesinin varsayılan CSS kutu boyutlandırma biçimini istediğiniz gibi değiştirebilirsiniz. Örneğin; box-sizing: border-box; olarak tanımlandığında ilgili HTML ögesinin sayfada kaplayacağı genişlik ve yükselik kenarlıklara göre hesaplanır.

CSS kutu modelini daha iyi kavrayabilmek amacıyla yapabileceğiniz en güzel egzersiz: Favori web tarayıcınızın geliştirme araçlarını kullanarak sayfadaki ögelerin CSS kutu modeline göre nasıl yapılandırıldığını incelemek olacaktır. Örneğin, bunu Google Chrome'da yapmak isterseniz:

İncelemek istediğini bir web sayfasını Chrome'da açın.
Sayfanın herhangi bir alanında sağ tuşa basın ve açılan menüden İncele (Inspect)'yi seçin. Chrome geliştirici araçları görüntülenecektir.
Elements bölümünün sağ tarafında bulunan Styles panelinde Computed'u tıklayın. Seçmiş olduğunuz HTML ögesine uygulanan nihayi CSS kodlarını ve CSS kutu modelini görüntüleyeceksiniz.