box-sizing: border-box özelliği nedir ve CSS'de ne rol oynar?

box-sizing özelliği, bir öğenin toplam genişliğinin ve yüksekliğinin nasıl hesaplandığını belirler.

box-sizing: content-box (varsayılan değer) — genişlik ve yükseklik yalnızca içeriğe (content) aittir. Padding ve border, belirtilen genişlik/yükseklik değerlerine eklenir.

box-sizing: border-box — genişlik ve yükseklik, padding ve border'ı içerir. content, belirtilen genişlik/yükseklik içine sığacak şekilde küçültülür.

CSS'te box-sizing: border-box'ın rolü:

• Hesaplamaları basitleştirme: Özellikle padding ve border kullanıldığında öğe boyutlarının hesaplanmasını kolaylaştırır.
• Düzenlemede öngörülebilirlik: Blokların boyutlarını tam olarak belirlemeye olanak tanır, padding ve border'dan bağımsız olarak, düzeni daha öngörülebilir hale getirir.
• Kutu modeliyle uyum: Blok boyutunun sezgisel anlaşılmasıyla uyumludur — kenarlıkları. Ağlar ve sabit boyutlu bileşenlerin oluşturulmasını kolaylaştırır.

Örnek:

.element-content-box {
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 1px solid black;
  box-sizing: content-box; /* Toplam genişlik = 100 + 10*2 + 1*2 = 122px */
  /* Toplam yükseklik = 100 + 10*2 + 1*2 = 122px */
}

.element-border-box {
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 1px solid black;
  box-sizing: border-box; /* Toplam genişlik = 100px */
  /* Toplam yükseklik = 100px */
  /* İçerik, 100 - 10*2 - 1*2 = 78px genişliğinde ve yüksekliğinde olacak */
}