box-sizing: content-box ve border-box arasındaki fark nedir?

box-sizing: content-box ve box-sizing: border-box arasındaki fark, tarayıcının öğenin toplam boyutunu nasıl hesapladığında yatar:

• content-box (varsayılan değer): genişlik ve yükseklik yalnızca içeriği belirtir. Bu boyutlara iç boşluk (padding) ve kenarlık (border) eklenir, böylece öğenin toplam boyutu artar.

• border-box: genişlik ve yükseklik, içerik, padding ve kenarlığı içerir. Yani, padding ve border "sığar" içeriğin içine tanımlanan boyutlara.

Örnek:

.box {
  width: 200px;
  padding: 10px;
  border: 5px solid black;
  box-sizing: content-box; /* veya border-box */
}

• content-box ile toplam genişlik: 200 + 102 + 52 = 230px.
• border-box ile toplam genişlik 200px kalır ve içerik padding ve border'ı sığdırmak için küçültülür.

border-box kullanımı, genellikle düzenleme için daha uygundur çünkü öğelerin boyutları padding ve border nedeniyle "şişmez".