Каква е разликата между box-sizing: content-box и border-box?

Разликата между box-sizing: content-box и box-sizing: border-box се състои в начина, по който браузърът изчислява общите размери на елемента:

• content-box (по подразбиране): ширината и височината задават само съдържанието. към тези размери се добавят вътрешните отстояния (padding) и рамките (border), което увеличава крайния размер на елемента.

• border-box: ширината и височината включват съдържанието, padding и border. Тоест, padding и border "се вписват" вътре в зададените размери.

Пример:

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

• При content-box общата ширина ще бъде: 200 + 102 + 52 = 230px.
• При border-box общата ширина ще остане 200px, а съдържанието ще се намали, за да побере padding и border.

Използването на border-box е по-удобно за оформлението, тъй като размерите на елементите не "се раздуват" заради padding и border.