В чём разница между box-sizing: border-box и content-box?

Суть

box-sizing отвечает на вопрос: что входит в width/height — только контент или ещё padding и border.

Сравнение

• content-box (по умолчанию) — width/height задают размер содержимого. Padding и border добавляются снаружи → итоговый блок шире.
• border-box — width/height включают content + padding + border. Внутрь «коробки» вписывается всё.

.box {
  width: 200px;
  padding: 20px;
  border: 5px solid;
  box-sizing: content-box; /* итоговая ширина ≈ 250px */
}

.box-bb {
  width: 200px;
  padding: 20px;
  border: 5px solid;
  box-sizing: border-box; /* итоговая ширина = 200px */
}

Практика

border-box предсказуемее для сеток и процентов: «хочу 50% ширины» — и блок реально занимает половину родителя, даже с padding.

Итог

content-box — ширина контента; border-box — ширина всей рамки. В большинстве UI-проектов глобально ставят border-box.