Что такое box-sizing: border-box и зачем его ставят?
Задаю блоку width: 200px, добавляю padding и border — а он становится шире 200px и ломает раскладку. Все советуют поставить box-sizing: border-box. Что это вообще делает и почему помогает?
2 ответа
box-sizing определяет, что именно входит в указанную вами ширину.
По умолчанию (content-box) width: 200px — это ширина только содержимого. Padding и border прибавляются сверху:
200 (content) + 2×16 (padding) + 2×2 (border) = 236px реальной ширины
Поэтому блок и «толстеет». Это та самая боль, когда два блока по 50% с паддингом не влезают в строку.
С border-box указанная ширина включает в себя content + padding + border:
.box {
box-sizing: border-box;
width: 200px; /* теперь это ИТОГОВАЯ ширина */
padding: 16px;
border: 2px solid;
}
Теперь блок ровно 200px, а padding и border «съедаются» изнутри за счёт содержимого. Расчёты становятся предсказуемыми: width: 50% и есть половина, что бы вы ни добавили внутрь.
Поэтому почти всегда в начало CSS ставят глобально:
*, *::before, *::after { box-sizing: border-box; }
Это избавляет от арифметики «сколько прибавит padding» и делает резиновые сетки надёжными. Фактически это стандарт де-факто в современной вёрстке.
Короткая аналогия: content-box — это когда вы заказали коробку 200мм, а упаковка добавилась снаружи и посылка стала больше. border-box — коробка ровно 200мм снаружи, а упаковка ужата внутрь. Для вёрстки второй вариант почти всегда удобнее, потому что вы думаете о габаритах блока целиком.