Вопросы к Поиску с Алисой
Браузеры применяют значение box-sizing: border-box по умолчанию для некоторых HTML-элементов чтобы упростить работу с размерами элементов. developer.mozilla.org
По умолчанию в блоковой модели CSS ширина и высота, которые задаются элементу, применяются только для его контента. developer.mozilla.org Если у элемента есть граница или внутренний отступ, то они добавляются к ширине и высоте, чтобы получить отображаемый на экране размер. developer.mozilla.org
Значение border-box говорит браузеру учитывать любые границы и внутренние отступы в значениях, которые указываются в ширине и высоте элемента. developer.mozilla.org Это позволяет, например, избежать выпадения плавающих элементов из предназначенных для них блоков. metanit.com
Кроме того, использование border-box делает размеры элементов более предсказуемыми, упрощает расчёты и уменьшает вероятность ошибок. qna.habr.com