box-sizing styrer hvad width og height egenskaberne faktisk måler. Standarden (content-box) måler kun indholdet; border-box gør dem til at inkludere padding og kant.
box-sizing styrer hvad width og height egenskaberne faktisk måler. Standarden (content-box) måler kun indholdet; border-box gør dem til at inkludere padding og kant.
.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 bliver padding og kant lagt oven på width, så elementet ender med at være bredere end det tal, du satte. Dette bryder layouts: en width: 50% boks med padding overflyder 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 rendererede bredde — padding og kant trækkes fra indefra. Det tal du sætter, er den størrelse du får, hvilket er langt mere intuitivt.
*, *::before, *::after {
box-sizing: border-box;
}
Hos næsten alle moderne stylesheets, frameworks og resets bliver dette anvendt globalt. Det gør størrelsesændring forudsigelig: width: 50% + padding forbliver nøjagtigt 50% bred, to width: 50% bokse sidder side om side uden overflyd osv.
border-box fjerner den enkelte mest almindelige kilde til layout-matematik-hovedpine — at skulle mentalt lægge padding og kant til hver bredde.
At sætte det globalt betragtes som en bedste praksis standard, fordi "den bredde jeg sætter, er den bredde jeg får" er sådan, du naturligt forventer, at størrelse virker.