Jaka jest różnica między box-sizing: content-box a border-box?

Różnica między box-sizing: content-box a box-sizing: border-box polega na tym, jak przeglądarka oblicza łączne rozmiary elementu:

• content-box (wartość domyślna): szerokość i wysokość określają tylko zawartość. Do tych wymiarów dodawane są marginesy wewnętrzne (padding) i obramowania (border), co zwiększa końcowy rozmiar elementu.

• border-box: szerokość i wysokość obejmują zawartość, padding i border. Innymi słowy, padding i border "wpasowują się" w zadane rozmiary.

Przykład:

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

• Przy content-box końcowa szerokość będzie: 200 + 102 + 52 = 230px.
• Przy border-box końcowa szerokość pozostanie 200px, a zawartość zostanie zmniejszona, aby pomieścić padding i border.

Użycie border-box jest często wygodniejsze w projektowaniu, ponieważ rozmiary elementów nie "rozrastają się" z powodu paddingu i borderu.