box-sizing bepaalt wat de width en height properties eigenlijk meten. De standaardwaarde (content-box) meet alleen de inhoud; zorgt ervoor dat padding en border erbij worden opgeteld.
box-sizing bepaalt wat de width en height properties eigenlijk meten. De standaardwaarde (content-box) meet alleen de inhoud; zorgt ervoor dat padding en border erbij worden opgeteld.
border-box.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! */
Met content-box worden padding en border bovenop width opgeteld, dus het element wordt uiteindelijk breder dan het getal dat je hebt ingesteld. Dit breekt layouts: een width: 50% box met padding loopt buiten zijn 50% uit.
.box {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 5px solid;
}
/* Rendered width = 200px TOTAL. Content shrinks to 150px to make room. */
Met border-box is width de uiteindelijke weergegeven breedte — padding en border worden van binnenuit afgetrokken. Het getal dat je instelt is de grootte die je krijgt, wat veel intuïtiever is.
*, *::before, *::after {
box-sizing: border-box;
}
Bijna elk modern stylesheet, framework en reset past dit wereldwijd toe. Het maakt sizing voorspelbaar: width: 50% + padding blijft precies 50% breed, twee width: 50% boxes gaan naast elkaar zonder over te lopen, enz.
border-box verwijdert de meest voorkomende bron van layout-berekeningen — je hoeft niet steeds mentaal padding en border bij elke breedte op te tellen.
Het wereldwijd instellen wordt beschouwd als een best-practice standaard, omdat "de breedte die ik instel is de breedte die ik krijg" is hoe je natuurlijk verwacht dat sizing werkt.