В чем разница между поведением блоков с box-sizing: content-box и с box-sizing: border-box

box-sizing: content-box (по умолчанию) учитывает только контент при расчете ширины/высоты. Padding и border добавляются к указанным размерам.

box-sizing: border-box включает padding и border в указанные размеры элемента, делая их внутренними.

Пример:

.box {
  width: 200px;
  padding: 20px;
  border: 5px solid;
}

.content-box {
  box-sizing: content-box; /* итоговая ширина: 200 + 20*2 + 5*2 = 250px */
}

.border-box {
  box-sizing: border-box; /* итоговая ширина останется 200px (контент сожмется) */
}

border-box удобен для точного контроля размеров, особенно в адаптивном дизайне.