CSS'te blok modeli nedir?

CSS'te kutu modeli, her öğe için oluşturulan dikdörtgen bir alanı tanımlar ve boyutlarının ve konumunun hesaplanmasında kullanılır. Dört bölümden oluşur:

• İçerik kutusu: Öğenin içeriğinin (metin, resimler vb.) görüntülendiği alan. Boyutu width ve height özellikleriyle belirlenir.
• Dolgu kutusu (padding): İçerik sınırı ile öğenin sınırı arasındaki alan. Boyutu padding özelliğiyle belirlenir. Öğenin arka plan rengi ve resmi bu alana yayılır.
• Sınır kutusu (border): Öğenin sınırını oluşturan ve padding kutusunu çevreleyen sınır. Boyutu border özellikleriyle belirlenir.
• Marjin kutusu: Öğenin sınırının etrafındaki alan, onu diğer öğelerden ayırır. Boyutu margin özellikleriyle belirlenir. Bu alan her zaman tamamen şeffaftır.

Varsayılan olarak, öğenin boyutu şu şekilde hesaplanır:

genişlik = width + padding-left + padding-right + border-left-width + border-right-width
yükseklik = height + padding-top + padding-bottom + border-top-width + border-bottom-width

box-sizing özelliği bu modeli değiştirmeye olanak tanır:

• content-box (varsayılan): width ve height değerleri yalnızca içerik kutusuna aittir.
• border-box: width ve height değerleri padding ve sınır dahil olmak üzere toplam boyutu belirtir.

.element-default {
  width: 100px; /* İçerik kutusunun genişliği = 100px */
  padding: 10px;
  border: 5px solid black;
  /* Öğenin gerçek genişliği: 100 + 10 + 10 + 5 + 5 = 130px */
}

.element-border-box {
  width: 100px; /* Öğenin gerçek genişliği = 100px */
  padding: 10px;
  border: 5px solid black;
  box-sizing: border-box;
  /* İçerik kutusunun genişliği: 100 - 10 - 10 - 5 - 5 = 70px */
}