Что такое box-sizing: border-box

box-sizing: border-box изменяет модель расчета размеров элемента в CSS. По умолчанию (content-box) ширина и высота элемента учитывают только контент, а padding и border добавляются к ним. С border-box padding и border включаются в указанные ширину и высоту, что упрощает верстку.

Пример:

.box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 5px solid black;
}

В этом случае общая ширина блока останется 200px (включая padding и border), а не 250px, как было бы при content-box. Часто применяют глобально:

* {
  box-sizing: border-box;
}