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