Wat is het boxmodel in CSS?

In CSS beschrijft het boxmodel een rechthoekig gebied dat voor elk element wordt gegenereerd en wordt gebruikt om de afmetingen en positie ervan te berekenen. Het bestaat uit vier delen:

• Inhoudsbox: Het gebied waar de inhoud van het element wordt weergegeven (tekst, afbeeldingen, enz.). De grootte wordt bepaald door de eigenschappen width en height.
• Padding-box: De ruimte tussen de rand van de inhoud en de rand van het element. De grootte wordt bepaald door de eigenschap padding. De achtergrondkleur en afbeelding van het element strekken zich uit tot dit gebied.
• Randbox: De rand van het element die de padding-box omringt. De grootte wordt bepaald door de eigenschappen border.
• Margebox: De ruimte rondom de rand van het element, die het scheidt van andere elementen. De grootte wordt bepaald door de eigenschap margin. Dit gebied is altijd volledig transparant.

De standaardgrootte van een element wordt als volgt berekend:

breedte = width + padding-left + padding-right + border-left-width + border-right-width
hoogte = height + padding-top + padding-bottom + border-top-width + border-bottom-width

De eigenschap box-sizing maakt het mogelijk om dit model te wijzigen:

• content-box (standaard): De afmetingen width en height verwijzen alleen naar de inhoudsbox.
• border-box: De afmetingen width en height omvatten padding en border.

.element-default {
  width: 100px; /* Breedte van de inhoudsbox = 100px */
  padding: 10px;
  border: 5px solid black;
  /* Werkelijke breedte van het element: 100 + 10 + 10 + 5 + 5 = 130px */
}

.element-border-box {
  width: 100px; /* Werkelijke breedte van het element = 100px */
  padding: 10px;
  border: 5px solid black;
  box-sizing: border-box;
  /* Breedte van de inhoudsbox: 100 - 10 - 10 - 5 - 5 = 70px */
}