Hoe beïnvloedt de eigenschap box-sizing de grootte van het element?

De CSS-eigenschap box-sizing bepaalt hoe de afmetingen van een element worden berekend — of de binnenmarges (padding) en randen (border) worden meegerekend of niet.

• Waarde content-box (standaard): de breedte en hoogte van het element bepalen alleen de inhoud. Binnenmarges en randen worden hieraan toegevoegd, waardoor de totale grootte toeneemt.

• Waarde border-box: de breedte en hoogte omvatten de inhoud, binnenmarges en randen. Dit betekent dat als je een breedte van 100px instelt, de inhoud wordt verkleind door padding en border zodat de totale breedte 100px blijft.

Voorbeeld:

.box {
  width: 200px;
  padding: 10px;
  border: 5px solid black;
  box-sizing: border-box;
}

In dit geval heeft het .box-element een totale breedte van 200px, inclusief padding en border. Als het content-box was, zou de totale breedte 200 + 210 + 25 = 230px zijn.

Het gebruik van border-box vereenvoudigt vaak de lay-out, omdat de afmetingen van elementen niet "uit de hand lopen" door padding en border.