box-sizing kontrollerar vad width och height egenskaper faktiskt mäter. Standardinställningen (content-box) mäter endast innehållet; border-box gör att de inkluderar padding och kant.
box-sizing kontrollerar vad width och height egenskaper faktiskt mäter. Standardinställningen (content-box) mäter endast innehållet; border-box gör att de inkluderar padding och 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 läggs padding och kant ovanpå width, så elementet blir bredare än det antal du ställde in. Det förstör layouter: en width: 50% låda med padding överflödar sin 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 är width den slutliga renderade bredden — padding och kant subtraheras från insidan. Det antal du anger är den storlek du får, vilket är mycket mer intuitivt.
*, *::before, *::after {
box-sizing: border-box;
}
Nästan varje modern stilmall, ramverk och återställning tillämpar detta globalt. Det gör dimensionering förutsägbar: width: 50% + padding förblir exakt 50% bred, två width: 50% rutor sitter sida vid sida utan att flöda över, etc.
border-box tar bort den enskilt vanligaste källan till layoutmatematiska huvudvärk — behovet av att mentalt lägga till padding och kant till varje bredd.
Att ställa in det globalt betraktas som en bästa praxis standard, eftersom "bredden jag anger är bredden jag får" är hur du naturligtvis förväntar dig att dimensionering ska fungera.