CSS box-sizing özelliği, bir etiketin toplam genişliğine ve yüksekliğine iç boşluk (padding) ve çerçeve (border) eklememizi sağlar.

Varsayılan olarak, bir etiketin genişliği ve yüksekliği şu şekilde hesaplarız :

  • genişlik (width) + iç boşluk (padding) + çerçeve (border) = Bir etiketin kapladığı toplam genişlik
  • yükseklik (height) + iç boşluk (padding) + çerçeve (border) = Bir etiketin kapladığı toplam yükseklik

Bknz : CSS Dersleri 11 - Box Model (Kutu Modeli)

Bu demek oluyor ki, bir etiketin genişliğini/yüksekliğini ayarladığınızda, etiket genellikle ayarladığınızdan daha büyük görünür (çünkü öğenin çerçevisi ve iç boşluğu etiketin belirtilen genişliğine/yüksekliğine eklenir).

Aşağıdaki kodlarda, aynı genişlik ve yüksekliğe sahip iki div etiketi göstermektedir:

.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
}
 
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
}

Bu div'lerin çıktısına bakıldığında, her ne kadar genişlik ve yükseklikleri aynı olsada ekranda kapladıkları alanın farklı olduğunu görmektesiniz. 

Bu sorunu box-sizing özelliği çözer.

CSS'de box-sizing özelliği, bir etiketin toplam genişliğine ve yüksekliğine padding ve border'ı dahil etmemizi sağlar.

Box-sizing değeri olarak border-box değeri atarsak ; bir etikette, padding ve border genişlik ve yüksekliğe dahil edilir.

.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
box-sizing: border-box;
}
 
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
}

Box-sizing özelliğini tüm etiketlerde kullanmak her zaman avantajlı olacaktır. Bu yüzden global değişkene tanımlanıp kullanılabilir.

 
 
 
 
* {
box-sizing: border-box;
}