CSS Dersleri 47 - Box-sizing Kullanımı

Merhaba değerli Kodlama Vakti takipçileri, bu dersimizde CSS'de Box-sizing Kullanımı Konusunu öğreneceğiz.

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;
}