Что такое box-sizing?

`box-sizing` определяет, что именно задают width и height: только содержимое или содержимое вместе с padding и border.

Значения

• `content-box` (по умолчанию) — размеры относятся только к содержимому; padding и border увеличивают элемент.
• `border-box` — размеры включают padding и border; содержимое ужимается.

.input {
  box-sizing: border-box;
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ccc;
}
/* поле ровно по ширине родителя, без переполнения */

Почему border-box популярен

С ним проще считать сетки и адаптивную вёрстку: width: 50% всегда значит половину родителя, сколько бы ни было padding. Поэтому его обычно включают глобально в reset.

Коротко для собеседования

box-sizing задаёт, входят ли padding и border в width/height; border-box делает размеры предсказуемыми.

Подробнее: MDN — box-sizing