Вопрос углубляется в влияние box-sizing на модель вычисления размеров.
По умолчанию (content-box): width задает только ширину контента, padding и border добавляются к ней.
border-box: width включает padding и border, упрощая верстку.
Сравнение:
/* content-box (по умолчанию) */
.div1 {
width: 200px;
padding: 20px;
border: 5px solid;
/* Фактическая ширина: 200 + 40 + 10 = 250px */
}
/* border-box */
.div2 {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 5px solid;
/* Фактическая ширина: 200px (включая padding и border) */
}Зачем использовать border-box?
Предсказуемость: заданная width — это итоговая ширина.
Упрощение адаптивной верстки.
Вывод:border-box — стандарт в современной верстке. Подключают глобально:
* { box-sizing: border-box; }