CSS: box sizing model
Het CSS box-sizing model bepaalt hoe de totale breedte en hoogte van een element wordt berekend.
box-sizing
Er zijn meerdere waarden mogelijk maar we bekijken de 2 belangrijkste.
content-box (browser standaard)
- width en height gelden alleen voor de content
- padding en border worden daarbovenop toegevoegd
- totale breedte = width + padding + border
css
/* we gebruiken de universal selector met ook
het ::after en ::before element om alle
elementen op onze pagina's te selecteren */
*,
*::before,
*::after {
box-sizing: content-box;
}border-box (reset css standaard)
- width en height omvatten content, padding én border
- de content krimpt automatisch om ruimte te maken voor padding en border
- totale breedte = width (inclusief alles)
css
/* we gebruiken de universal selector met ook
het ::after en ::before element om alle
elementen op onze pagina's te selecteren */
*,
*::before,
*::after {
box-sizing: content-box;
}Waarom border-box vaak handiger is:
Met border-box krijg je precies de afmetingen die je specificeert, ongeacht padding en border. Dit maakt responsive design en grid/flexbox layouts veel voorspelbaarder.
We zullen dus altijd de box-sizing property als border-box definiëren. Deze is reeds gedefiniëerd in de CSS-reset. Als je de css-reset correct toegevoegd hebt zal deze dus altijd correct staan voor de start van je project.