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

box-sizing определяет, как рассчитываются размеры элемента.

content-box (по умолчанию):

• width и height задают размер только контента.
• Padding и border добавляются к общей ширине/высоте.

div {
  box-sizing: content-box;
  width: 100px;
  padding: 10px;
  border: 5px solid;
  /* Фактическая ширина = 100 + 20 + 10 = 130px */
}

border-box:

• width и height включают padding и border.
• Удобно для точного контроля размеров.

div {
  box-sizing: border-box;
  width: 100px;
  padding: 10px;
  border: 5px solid;
  /* Фактическая ширина = 100px (контент: 70px) */
}

Чаще используют border-box для упрощения вёрстки.