box-sizing mengawal apa yang sebenarnya diukur oleh sifat width dan height. Nilai lalai (content-box) hanya mengukur kandungan; border-box membuatnya termasuk padding dan border.
box-sizing mengawal apa yang sebenarnya diukur oleh sifat width dan height. Nilai lalai (content-box) hanya mengukur kandungan; border-box membuatnya termasuk padding dan border.
.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! */
Dengan content-box, padding dan border ditambahkan di atas width, jadi elemen berakhir lebih lebar daripada jumlah yang telah anda tetapkan. Ini memecahkan tata letak: kotak width: 50% dengan padding meluap dari 50% nya.
.box {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 5px solid;
}
/* Rendered width = 200px TOTAL. Content shrinks to 150px to make room. */
Dengan border-box, width adalah final lebar yang dirender — padding dan border ditolak dari dalam. Angka yang anda tetapkan adalah ukuran yang anda dapatkan, yang jauh lebih intuitif.
*, *::before, *::after {
box-sizing: border-box;
}
Hampir setiap gaya helaian moden, rangka kerja, dan tetapan semula menggunakan ini secara global. Ini membuat pengubahan saiz dapat diramal: width: 50% + padding kekal tepat 50% lebar, dua kotak width: 50% duduk bersebelahan tanpa melimpah, dsb.
border-box menghilangkan sumber sakit kepala pengiraan tata letak yang paling biasa — perlu secara mental menambahkan padding dan border pada setiap lebar.
Menetapkannya secara global dianggap sebagai nilai lalai terbaik-amalan, kerana "lebar yang saya tetapkan adalah lebar yang saya dapatkan" adalah cara anda secara semula jadi menjangkakan pengubahan saiz berfungsi.