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

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

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

• border-box: ширина и высота включают в себя содержимое, отступы и рамки. То есть, 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.