Для чего использовал box-sizing: border-box

box-sizing: border-box изменяет модель расчета размеров элемента, включая padding и border в общую ширину/высоту. Без него padding и border добавляются к width/height, что может ломать верстку.

Пример:

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

• Без border-box: реальная ширина = 200 + 202 + 52 = 250px
• С border-box: ширина останется 200px (padding и border "входят" в width)

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

* {
  box-sizing: border-box;
}

Это упрощает расчеты и предотвращает неожиданное поведение при добавлении padding/border. Особенно полезно для резиновой верстки и grid/flex-раскладок.