Что такое box-sizing

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

Есть два значения:

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

Пример:

.box {
  box-sizing: border-box; /* padding и border не увеличат размер */
  width: 200px;
  padding: 20px;
  border: 5px solid black;
}

Без border-box реальная ширина была бы 250px (200 + 202 + 52). С ним — строго 200px.