CSS'te kutu modeli nedir?

CSS'de kutu modeli, bir öğenin web sayfasında kapladığı alanın nasıl hesaplandığını tanımlar. Şunları içerir:

• İçerik: Öğenin gerçek içeriği için alan (metin, resimler).
• Padding (iç boşluk): İçerik ile öğenin kenarlığı arasındaki boşluk.
• Border (kenarlık): Padding ve içeriği çevreleyen sınır.
• Margin (dış boşluk): Öğenin kenarlığı etrafındaki alan, diğer öğelerden ayırır.

Varsayılan olarak (standart model box-sizing: content-box) öğenin boyutu, içerik, padding ve border'ın toplam boyutuna göre belirlenir. Margin toplam alanı artırır, ancak öğenin kendisinin boyutunu etkilemez.

box-sizing: border-box özelliği, öğenin boyut hesaplamasını değiştirir ve padding ile border'ı toplam genişlik ve yüksekliğe dahil eder. Bu durumda, öğenin boyutu width/height ile belirlenir ve padding ile border "alanı tüketir".

/* Standart model (varsayılan) */
.element-content-box {
  width: 100px; /* İçerik boyutu */
  padding: 10px;
  border: 5px solid black;
  /* Toplam genişlik: 100px (içerik) + 10px (sol padding) + 10px (sağ padding) + 5px (sol border) + 5px (sağ border) = 130px */
}

/* border-box modeli */
.element-border-box {
  width: 100px; /* Toplam genişlik: içerik + padding + border */
  padding: 10px;
  border: 5px solid black;
  /* İçerik boyutu: 100px - 10px (sol padding) - 10px (sağ padding) - 5px (sol border) - 5px (sağ border) = 70px */
}

Kutu modelini anlamak, sayfadaki öğeleri doğru konumlandırmak ve düzenlemek için kritiktir.