CSS'te kutu modeli nedir?

CSS kutu modeli, öğelerin sayfada dikdörtgen bloklar olarak nasıl görüntülendiğini açıklar. Dört bölge veya katmandan oluşur ve bunlar içerikten başlayarak üst üste biner:

1. İçerik: Öğenin gerçek içeriğinin bulunduğu alan (metin, resimler vb.). Boyutu width ve height özellikleriyle belirlenir.

2. Padding (İç boşluk): İçerik ile öğenin kenarlığı arasındaki şeffaf alan. padding-top, padding-right, padding-bottom, padding-left veya padding kısaltmasıyla ayarlanır.

3. Kenarlık (Border): Padding ve İçeriği çevreleyen çizgi. Stili, kalınlığı ve rengi border-width, border-style, border-color veya border gibi kısaltmalarla belirlenir.

4. Marjin (Margin): Öğenin kenarlığı etrafındaki şeffaf alan, onu diğer öğelerden ayırır. margin-top, margin-right, margin-bottom, margin-left veya margin özellikleriyle ayarlanır. Yan yana blokların marjinleri çakışabilir.

Varsayılan davranış, box-sizing: content-box (varsayılan) ile tanımlanır ve width ile height özelliklerinin yalnızca içerik (Content) ile ilgili olduğunu belirler. Padding ve Border bu boyuta eklenir, böylece toplam öğe boyutunu artırır.

box-sizing: border-box kullanıldığında, width ve height özellikleri İçerik, Padding ve Border'ı içerir. Marjin (margin) her zaman öğenin toplam boyutuna eklenir, box-sizing'den bağımsızdır.

Örnek:

div {
  width: 100px; /* İçerik genişliği (content-box için) veya tüm öğenin genişliği (border-box için) */
  height: 50px; /* İçerik yüksekliği (content-box için) veya tüm öğenin yüksekliği (border-box için) */
  padding: 10px; /* İç boşluk */
  border: 2px solid black; /* Kenarlık */
  margin: 15px; /* Dış marjin */
}

box-sizing değerine bağlı olarak, öğenin gerçek boyutları farklı olacaktır.

• box-sizing: content-box: Gerçek genişlik = 100px (İçerik) + 10px (Padding sol) + 10px (Padding sağ) + 2px (Border sol) + 2px (Border sağ) = 124px. Gerçek yükseklik = 50px (İçerik) + 10px (Padding üst) + 10px (Padding alt) + 2px (Border üst) + 2px (Border alt) = 74px.
• box-sizing: border-box: Gerçek genişlik = 100px (İçerik + Padding + Border). Gerçek yükseklik = 50px (İçerik + Padding + Border).

Dış marjin margin: 15px toplam boyutun etrafına eklenir.