Het Boxmodel op een Praktische Manier Begrijpen

Elk element op een webpagina wordt weergegeven als een rechthoekige box. Elke box bestaat uit vier delen:

• Inhoud: de daadwerkelijke tekst of elementen;
• Opvulling: ruimte binnen het element;
• Rand: omringt de inhoud en opvulling;
• Marge: ruimte buiten het element.

Visuele structuur

Marge → Rand → Opvulling → Inhoud. De totale grootte van een element is afhankelijk van al deze onderdelen.

Inhoud

Het zichtbare deel van het element: tekst, afbeeldingen of andere elementen.

Opvulling (Binnenruimte)

Creëert ruimte tussen inhoud en rand.

.box {
  padding: 20px;
}

Verkorte notatie

padding: 20px; /* all sides */
padding: 10px 20px; /* top/bottom | left/right */
padding: 10px 20px 5px; /* top | left/right | bottom */
padding: 10px 15px 20px 25px; /* top | right | bottom | left */

Marge (Buitenruimte)

Creëert ruimte tussen elementen.

.box {
  margin: 20px;
}

Shorthand

margin: 20px;
margin: 10px 20px;
margin: 10px 20px 5px;
margin: 10px 15px 20px 25px;

Rand

Bepaalt de rand van het element.

.box {
  border: 4px solid darkblue;
}

Belangrijk verschil

• Padding → binnenruimte (beïnvloedt achtergrond);
• Margin → buitenruimte (beïnvloedt achtergrond NIET).

Box Sizing

Bepaalt hoe breedte en hoogte worden berekend.

box-sizing: content-box; /* default */
box-sizing: border-box;

• content-box: padding + border worden toegevoegd aan de grootte;
• border-box: alles inbegrepen in de grootte.

In echte projecten heeft border-box de voorkeur.