Wat is het boxmodel in CSS?

Het CSS-boxmodel beschrijft hoe elementen op de pagina worden weergegeven als rechthoekige blokken. Het bestaat uit vier zones of lagen die op elkaar liggen, beginnend met de inhoud:

1. Inhoud: Het gebied waar de daadwerkelijke inhoud van het element zich bevindt (tekst, afbeeldingen, enz.). De grootte wordt bepaald door de eigenschappen width en height.

2. Padding (Binnenruimte): Het transparante gebied tussen de inhoud en de rand van het element. Het wordt ingesteld met de eigenschappen padding-top, padding-right, padding-bottom, padding-left of de verkorte padding.

3. Rand (Border): De lijn die Padding en Inhoud omringt. De stijl, dikte en kleur worden bepaald door de eigenschappen border-width, border-style, border-color of door verkortingen zoals border.

4. Marge (Margin): Het transparante gebied rond de rand van het element, dat het scheidt van andere elementen. Het wordt ingesteld met de eigenschappen margin-top, margin-right, margin-bottom, margin-left of de verkorte margin. Marges van aangrenzende blokken kunnen samenvallen.

Het standaardgedrag, beschreven door box-sizing: content-box (standaard), bepaalt dat de eigenschappen width en height alleen betrekking hebben op de inhoud (Content). Padding en Border worden aan deze maat toegevoegd, waardoor de totale grootte van het element toeneemt.

Bij gebruik van box-sizing: border-box omvatten de eigenschappen width en height de Inhoud, Padding en Border. Marges (margin) worden altijd bij de totale grootte van het element opgeteld, ongeacht box-sizing.

Voorbeeld:

div {
  width: 100px; /* Breedte van de inhoud (voor content-box) of van het hele element (voor border-box) */
  height: 50px; /* Hoogte van de inhoud (voor content-box) of van het hele element (voor border-box) */
  padding: 10px; /* Binnenruimte */
  border: 2px solid black; /* Rand */
  margin: 15px; /* Externe marge */
}

Afhankelijk van de waarde van box-sizing zullen de werkelijke afmetingen van het element verschillen.

• box-sizing: content-box: De werkelijke breedte = 100px (Inhoud) + 10px (Padding links) + 10px (Padding rechts) + 2px (Border links) + 2px (Border rechts) = 124px. De werkelijke hoogte = 50px (Inhoud) + 10px (Padding boven) + 10px (Padding onder) + 2px (Border boven) + 2px (Border onder) = 74px.
• box-sizing: border-box: De werkelijke breedte = 100px (Inhoud + Padding + Border). De werkelijke hoogte = 50px (Inhoud + Padding + Border).

De externe marge margin: 15px wordt toegevoegd rondom deze totale grootte.