Wat is de eigenschap box-sizing: border-box en welke rol speelt deze in CSS?

De eigenschap box-sizing bepaalt hoe de totale breedte en hoogte van een element worden berekend.

box-sizing: content-box (standaardwaarde) — de breedte en hoogte verwijzen alleen naar de inhoud (content). Padding en border worden toegevoegd aan de opgegeven breedte/hoogte.

box-sizing: border-box — de breedte en hoogte omvatten padding en border. De content wordt ingekrompen om binnen de gespecificeerde afmetingen te passen.

De rol van box-sizing: border-box in CSS:

• Vereenvoudiging van berekeningen: Maakt het berekenen van de afmetingen van elementen gemakkelijker, vooral bij gebruik van padding en border.
• Voorspelbaarheid in de lay-out: Maakt het mogelijk om de afmetingen van blokken precies te bepalen, ongeacht padding en border, waardoor de lay-out voorspelbaarder wordt.
• Gemak in het boxmodel: Komt overeen met het intuïtieve begrip van de grootte van een blok — de randen ervan. Vereenvoudigt het maken van rasterstructuren en vaste componenten.

Voorbeeld:

.element-content-box {
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 1px solid black;
  box-sizing: content-box; /* Totale breedte = 100 + 10*2 + 1*2 = 122px */
  /* Totale hoogte = 100 + 10*2 + 1*2 = 122px */
}

.element-border-box {
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 1px solid black;
  box-sizing: border-box; /* Totale breedte = 100px */
  /* Totale hoogte = 100px */
  /* De inhoud zal 100 - 10*2 - 1*2 = 78px breed en hoog zijn */
}