box-sizing width ve height özelliklerinin aslında ne ölçtüğünü kontrol eder. Varsayılan (content-box) yalnızca içeriği ölçer; border-box bunların padding ve border içermesini sağlar.
box-sizing width ve height özelliklerinin aslında ne ölçtüğünü kontrol eder. Varsayılan (content-box) yalnızca içeriği ölçer; border-box bunların padding ve border içermesini sağlar.
.box {
box-sizing: content-box; /* the default */
width: 200px;
padding: 20px;
border: 5px solid;
}
/* Rendered width = 200 + 2×20 + 2×5 = 250px ← bigger than you asked for! */
content-box ile, padding ve border widthın üzerine eklenir, bu nedenle öğe belirlediğiniz sayıdan daha geniş olur. Bu düzenleri bozar: padding ile width: 50% kutusu %50'sini taşar.
.box {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 5px solid;
}
/* Rendered width = 200px TOTAL. Content shrinks to 150px to make room. */
border-box ile width son oluşturulan genişliktir — padding ve border içeride çıkarılır. Belirlediğiniz sayı, elde ettiğiniz boyuttur ve bu çok daha sezgiseldir.
*, *::before, *::after {
box-sizing: border-box;
}
Hamda hemen hemen her modern stil sayfası, framework ve sıfırlama bunu global olarak uygular. Bu boyutlandırmayı tahmin edilebilir hale getirir: width: 50% + padding tam olarak %50 genişliğinde kalır, iki width: 50% kutusu yan yana oturur vs.
border-box düzen matematiksteki en yaygın sorun kaynağını ortadan kaldırır — her width için padding ve border'ı zihinsel olarak ekleme ihtiyacı.
Bunu global olarak ayarlamak en iyi uygulama varsayılanı olarak kabul edilir, çünkü "belirlediğim genişlik aldığım genişliktir" boyutlandırmanın doğal olarak nasıl çalışmasını beklediğinizdir.