Over Box-sizing
Webpagina's worden opgebouwd in rechthoekige blokken. In de standaarden heet dat het Box-model.
Elke box bevat vier elementen:
- De buitenmarge (margin)
- De rand (border)
- De binnenmarge (padding)
- De inhoud (content)
Met het box-model is wat vreemds aan de hand. Stel, je hebt deze code:
<div style="width:300px; height:200px; padding:20px;
border 5px solid red; margin:25px">...</div>
Dit geeft een box met een breedte van 300 + 2×20 + 2×5 + 2×25 = 400px. De hoogte is 200 + 2×20 + 2×5
+ 2×25 = 300px.
Het benodigde oppervlak voor deze box is dus 400 × 300 px.
Als je de padding verhoogt tot 25px, wordt de benodigde ruimte 410 × 310 px. Het gevolg is dat andere elementen worden
weggedrukt, waardoor de lay-out van de bladzijde wordt verstoord. Dat is niet handig.
Het zelfde gebeurt als je de breedte van de rand verandert.
De oorzaak is dat je de grootte van de Content opgeeft. Dat is ooit zo afgesproken en het blijkt een minder
gelukkige keuze te zijn.
Binnen CSS is een oplossing bedacht om dit te omzeilen. Je geeft aan de CSS van het betreffende element de eigenschap
box-sizing:border-box mee. De afmetingen worden nu bepaald op basis van de
inhoud (Content) + de binnenmarge (Padding) + de buitenkant van de rand (border).
Als je ook de buitenmarge (margin) zou veranderen, kan de lay-out van je document op een vergelijkbare manier ontsporen. CSS heeft geen voorzieningen om dit op te vangen.
De default-waarde van box-sizing is content-box, dat wil zeggen: De afmetingen van de box zijn bedoeld voor de content. De uiteindelijke afmetingen worden bepaald zoals hierboven is getoond.
Door box-sizing in te stellen op border-box, wordt voorkomen dat de lay-out verstoord raakt als je de padding en/of de border verandert. Maar nu kan het gebeuren dat de content niet meer in de box past. Dat is gemakkelijker op te lossen dan een verstoorde opmaak van het hele document.
Het ligt voor de hand dat je altijd met box-sizing:border-box wilt werken, voor elk element in je website. Dat is
eenvoudig te realiseren door dit in je CSS op te nemen:
* { box-sizing: border-box; }
De selector * betekent "elk element".
Opmerking:
Als je ook de buitenmarge (margin) zou veranderen, kan de lay-out van je document op een vergelijkbare manier ontsporen.
CSS heeft geen voorzieningen om dit op te vangen.
Er was een poosje een trend gaande onder de browserfabrikanten om box-sizing:border-box te gaan gebruiken als default-waarde,
in plaats van content-box, maar dat stuit op veel praktische bezwaren. box-sizing:content-box zal voorlopig
wel de default-waarde blijven.
