В чем разница между значениями свойства box-sizing

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

1. content-box (по умолчанию) — ширина/высота включают только контент. Padding и border добавляются к общему размеру.
2. border-box — ширина/высота включают контент, padding и border. Общий размер остаётся неизменным.

Пример:

.box {
  width: 100px;
  padding: 10px;
  border: 5px solid;
}

/* content-box: общая ширина = 100 + 20 + 10 = 130px */
/* border-box: общая ширина остаётся 100px */