Het box model

CSS box

De CSS box, waarin elk html element geplaatst wordt - heeft een marge (margin), een rand (border) en een opvulling (padding). Van deze drie kenmerken kan de 'dikte' voor alle vier de zijden worden bepaald. Cascading Style Sheets gaat ervan uit dat elk element staat in een rechthoekig gebied, de box. Van binnen naar buiten bestaat de box uit

1. de inhoud van het element,
2. de padding (CSS property - padding),
3. de border (CSS property - border) en
4. de margin (CSS property - margin).

Visueel ziet het er als volgt uit:

Box modellen

Content box

In het W3C box model, is de breedte van een element gelijk met de inhoud van het element, dus de breedte van de box is breedte van de inhoud zonder rekening te houden met de padding en de border.

Border box

In het traditionele box model, is de breedte van een element gelijk aan de breedte van border tot border. Dus is de breedte van een element gelijk aan de breedte van de inhoud, plus de breedte van de padding, plus de breedte van de border.

Alle browsers, behalve IE in "Quirks Mode" (IE5.5 Mode), gebuiken het traditionele box-model.

Wel model is het beste?

Ik gebruik het liefst het traditionele model omdat het intuïtiever is. Een De breedte van een 'doos' is de inhoud, plus de kartonnen rand, plus het eventuele opvulsel.

De universele selector gebruik je om algemene stijlregels te definiëren. Een goed voorbeeld hiervan is het box-model dat je voor de elementen wilt gebruiken:

* {
    box-sizing: border-box
}

of

* {
    box-sizing: content-box
}

Samenvatting

Met de box-sizing eigenschap kan je bepalen hoe boxen gemeten worden. De box-sizing eigenschap kan twee waarden aannemen:

1. content-box: bij het berekenen van de grootte van een box moet je padding en border erbij optellen om de hoogte en breedte van het element te berekenen.
2. border-box: padding en border worden mee gerekend in de hoogte en breedte van een element.

De meest intuïtieve manier om met boxen te werken is border-box.

Toepassing

flexible inputs

Met border-box kan je een padding en een width van gemengde eenheden kan instellen zonder rare neveneffecten. Een fantastische toepassing hiervan is het creëren van flexibele input elementen met een vaste padding-grootte.

In het voorbeeld heeft het input element een welbepaalde padding in ems en toch kunnen we een width opgeven in percenten:

input[type="text"] {
   /* Flexibility */
   box-sizing: border-box;
   width: 100%;
   /* Styling */
   padding: .4em .55em;
   font-size: inherit;
   font-family: inherit;
   color: inherit;
   border: 0;
   border-radius: .25em;
   outline: none
}

Op CodePen vind je een voorbeeld hiervan. Bekijk de code.

bron: The magic of CSS