Для чего используется свойство box-sizing

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

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

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

Пример:

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

Часто применяют глобально:

* {
  box-sizing: border-box;
}

Это предотвращает неожиданное растягивание элементов из-за padding/border.