CSS Box-sizing
Met de eigenschapbox-sizing kunnen we de padding en border opnemen in de totale breedte en hoogte van een element, zo kunnen we de effectieve width en height van het element bepalen.
Zonder de CSS box-sizing eigenschap
Wanneer je de width of height van een element instelt, lijkt het element vaak groter dit komt omdat de border en padding automatisch aan het element worden toegevoegd.De volgende afbeelding toont twee <div> elementen met dezelfde opgegeven width en height:
Deze div is kleiner (breedte is 300px en hoogte is 100px).
Deze div is groter (breedte is ook 300px en hoogte is 100px).
Voorbeeld:
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
}
 |
Wat hierboven opvalt is dat zonder de eigenschap box-sizing te gebruiken de tweede div breder wordt weergegeven, omdat hier de border en padding standaard worden opgenomen. |
Met de CSS box-sizing eigenschap
Als jebox-sizing: border-box; op een element instelt, zal de padding en de border geen invloed meer uitoefenen op de breedte. Zo wordt de padding en border opgenomen in de totale breedte en hoogte van een element. Dit betekent dat we dan het bovenstaande probleem hebben opgelost.
Beide <div's> zijn nu even groot!
Zelfde grootte!
Het zelfde voorbeeld als hierboven, met box-sizing: border-box; toegevoegd aan beide <div> elementen:
Voorbeeld:
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
box-sizing: border-box;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
}
Omdat het resultaat van het gebruik van de eigenschap
box-sizing: border-box; zo veel beter is, willen veel ontwikkelaars dat alle elementen op hun pagina's op deze manier werken. De onderstaande code zorgt ervoor dat alle elementen op deze manier worden ingesteld.
