Wat is het verschil tussen box-sizing: content-box en border-box?

Het verschil tussen box-sizing: content-box en box-sizing: border-box ligt in hoe de browser de totale afmetingen van het element berekent:

• content-box (standaardwaarde): de breedte en hoogte geven alleen de inhoud aan. Aan deze afmetingen worden de binnenmarges (padding) en randen (border) toegevoegd, waardoor de uiteindelijke grootte van het element toeneemt.

• border-box: de breedte en hoogte omvatten de inhoud, padding en border. Met andere woorden, padding en border "passen" binnen de vastgestelde afmetingen.

Voorbeeld:

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

• Bij content-box is de totale breedte: 200 + 102 + 52 = 230px.
• Bij border-box blijft de totale breedte 200px, en wordt de inhoud verkleind om padding en border te accommoderen.

Het gebruik van border-box is vaak handiger voor lay-out, omdat de afmetingen van elementen niet "uitzetten" door padding en border.