box-sizing özelliği öğenin boyutunu nasıl etkiler?

CSS box-sizing özelliği, bir öğenin boyutlarının nasıl hesaplandığını belirler — iç boşluklar (padding) ve kenarlıklar (border) dahil edilip edilmediğine göre.

• Değer content-box (varsayılan): öğenin genişliği ve yüksekliği yalnızca içeriği tanımlar. İç boşluklar ve kenarlıklar bu boyutlara eklenir, böylece toplam boyut artar.

• Değer border-box: genişlik ve yükseklik, içerik, iç boşluklar ve kenarlıkları içerir. Bu, eğer genişlik 100px olarak ayarlanmışsa, içerik padding ve border dikkate alınarak küçültülür ve toplam boyut 100px kalır.

Örnek:

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

Bu durumda, .box öğesi toplamda 200px genişliğe sahip olur, padding ve border dahil. Eğer content-box olsaydı, toplam genişlik 200 + 210 + 25 = 230px olurdu.

border-box kullanımı genellikle düzeni kolaylaştırır, çünkü öğelerin boyutları padding ve border nedeniyle "dağılmaz".