Wat is het boxmodel, waar bestaat het uit en welke…

Het CSS Box Model is een abstracte entiteit die beschrijft hoe HTML-elementen op de pagina worden weergegeven als rechthoekige blokken. Het bepaalt de grootte en de positie van de inhoud, interne marges, randen en externe marges van het element.

Het boxmodel bestaat uit de volgende onderdelen:

Inhoud: De inhoud van het element (tekst, afbeeldingen, etc.). De grootte wordt bepaald door de eigenschappen width en height.
Padding: De ruimte tussen de inhoud van het element en de rand ervan. Wordt gedefinieerd door de eigenschappen padding-top, padding-right, padding-bottom, padding-left of de verkorte eigenschap padding.
Rand (Border): De rand rond de interne marge en inhoud. Wordt gedefinieerd door de eigenschappen border-width, border-style, border-color of de verkorte eigenschap border.
Marge (Margin): De ruimte tussen de rand van het element en externe elementen. Wordt gedefinieerd door de eigenschappen margin-top, margin-right, margin-bottom, margin-left of de verkorte eigenschap margin.

Er zijn twee hoofdtypen boxmodellen, bepaald door de eigenschap box-sizing:

content-box (standaardwaarde): De breedte en hoogte van het element, ingesteld door width en height, verwijzen alleen naar het inhoudsgebied. Padding en Border worden toegevoegd aan deze afmetingen, waardoor de totale grootte van het element toeneemt.

div {
  width: 100px;
  height: 100px;
  padding: 10px; /* Voegt 20px toe aan de totale grootte in elke as */
  border: 2px solid black; /* Voegt 4px toe aan de totale grootte in elke as */
  box-sizing: content-box; /* Standaard gedrag */
}
/* De totale grootte van het element zal 124px bij 124px zijn */

border-box: De breedte en hoogte van het element, ingesteld door width en height, omvatten de inhoud, padding en border. Padding en Border verhogen de totale grootte niet, maar " comprimeren" het inhoudsgebied.

div {
  width: 100px;
  height: 100px;
  padding: 10px; /* Inbegrepen in de totale breedte/hoogte */
  border: 2px solid black; /* Inbegrepen in de totale breedte/hoogte */
  box-sizing: border-box;
}
/* De totale grootte van het element zal 100px bij 100px zijn */

border-box wordt vaker gebruikt voor een voorspelbaarder gedrag van de grootte van elementen bij het toevoegen van padding en border. Dit is bijvoorbeeld handig bij het maken van responsieve lay-outs, waar elementen een bepaalde procentuele breedte moeten innemen.

Wat is het boxmodel, waar bestaat het uit en welke soorten zijn er?