Box model i box-sizing — skąd bierze się szerokość?

Prostokąt elementu składa się z treści, paddingu, obramowania i marginesu. W content-box szerokość dotyczy samej treści, a w border-box obejmuje również padding i border.

.card {
  width: 200px;
  padding: 20px;
  border: 2px solid;
  box-sizing: border-box;
}

Wynik: zewnętrzna szerokość obramowania to 200 px; treść ma 156 px. Przy content-box byłoby 244 px. Margines nie mieści się w tych 200 px.

Pułapka: width: 100% z dodatkowym paddingiem przy content-box może powodować przepełnienie.