box-sizing kontrollerer hva width og height egenskapene faktisk måler. Standard (content-box) måler kun innholdet; border-box gjør at de inkluderer padding og border.
box-sizing kontrollerer hva width og height egenskapene faktisk måler. Standard (content-box) måler kun innholdet; border-box gjør at de inkluderer padding og 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! */
Med content-box blir padding og border lagt på toppen av width, så elementet blir bredere enn tallet du satte. Dette ødelegger layout: en width: 50% boks med padding overflower dens 50%.
.box {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 5px solid;
}
/* Rendered width = 200px TOTAL. Content shrinks to 150px to make room. */
Med border-box er width den endelige renderte bredden — padding og border blir trukket fra innsiden. Tallet du setter er størrelsen du får, noe som er langt mer intuitivt.
*, *::before, *::after {
box-sizing: border-box;
}
Nesten alle moderne stilark, rammeverk og tilbakestillinger bruker dette globalt. Det gjør sizing forutsigbar: width: 50% + padding forblir nøyaktig 50% bred, to width: 50% bokser sitter ved siden av hverandre uten å overflow, osv.
border-box fjerner den største kilden til layout-math hodepine — å måtte mentalt legge til padding og border til hver width.
Å sette det globalt anses som en best-practice standard, fordi "bredden jeg setter er bredden jeg får" er hvordan du naturlig forventer at sizing skal fungere.