Wat is het boxmodel in CSS?

Het boxmodel in CSS beschrijft hoe de ruimte die een element inneemt op een webpagina wordt berekend. Het omvat:

• Inhoud: Het gebied voor de daadwerkelijke inhoud van het element (tekst, afbeeldingen).
• Padding (opvulling): De ruimte tussen de inhoud en de rand van het element.
• Border (rand): De rand die padding en inhoud omringt.
• Margin (marge): De ruimte rondom de rand van het element, die het scheidt van andere elementen.

De standaardgrootte van een element (in het standaardmodel box-sizing: content-box) wordt bepaald door de som van de afmetingen van inhoud, padding en border. Marges worden toegevoegd aan de totale ruimte, maar beïnvloeden de grootte van het element zelf niet.

De eigenschap box-sizing: border-box wijzigt de berekening van de grootte van het element, waarbij padding en border worden inbegrepen in de totale breedte en hoogte. In dit geval wordt de grootte van het element bepaald door width/height, en 'verbruiken' padding en border ruimte binnen de inhoud.

/* Standaardmodel (standaard) */
.element-content-box {
  width: 100px; /* Inhoudsgrootte */
  padding: 10px;
  border: 5px solid black;
  /* Totale breedte: 100px (inhoud) + 10px (padding links) + 10px (padding rechts) + 5px (rand links) + 5px (rand rechts) = 130px */
}

/* border-box-model */
.element-border-box {
  width: 100px; /* Totale breedte: inhoud + padding + border */
  padding: 10px;
  border: 5px solid black;
  /* Inhoudsgrootte: 100px - 10px (padding links) - 10px (padding rechts) - 5px (rand links) - 5px (rand rechts) = 70px */
}

Het begrijpen van het boxmodel is essentieel voor het nauwkeurig positioneren en samenstellen van elementen op de pagina.