Ответ
box-sizing определяет, как рассчитываются размеры элемента.
content-box (по умолчанию):
widthиheightзадают размер только контента.- Padding и border добавляются к общей ширине/высоте.
div {
box-sizing: content-box;
width: 100px;
padding: 10px;
border: 5px solid;
/* Фактическая ширина = 100 + 20 + 10 = 130px */
}border-box:
widthиheightвключают padding и border.- Удобно для точного контроля размеров.
div {
box-sizing: border-box;
width: 100px;
padding: 10px;
border: 5px solid;
/* Фактическая ширина = 100px (контент: 70px) */
}Чаще используют border-box для упрощения вёрстки.
Ответ 18+ 🔞
А, слушай, про эту вашу box-sizing! Ну, классика же, пиздец. Сидишь, верстаешь, вроде всё по макету, а тут — бац! — и блок на 30 пикселей шире, сука. А всё почему? Потому что мозги на content-box по умолчанию стоят, вот почему.
content-box (это как оно из коробки):
Представь, ты заказал пиццу шириной 100 пикселей. Это сам корж, контент. А потом ты, жадная жопа, решил добавить сырную кромку (это border) и ещё воздушную подушку в коробке (padding). Так вот, с content-box твоя итоговая пицца с доставкой будет уже не 100, а, блядь, 130 пикселей! Потому что бордюр и отступы — сверху.
div {
box-sizing: content-box; /* Дефолтное, ебаное состояние */
width: 100px; /* Сам корж */
padding: 10px; /* Воздух в коробке */
border: 5px solid; /* Сырная кромка */
/* Итог на тарелке: 100 + 20 + 10 = 130px. Охуеть, да? */
}А теперь border-box (здравый смысл):
А вот это — магия, ёпта. Ты говоришь: «Хочу пиццу, чтобы итого 100 пикселей было ВСЁ ВМЕСТЕ: и корж, и кромка, и коробка». И CSS такой: «Окей, мудила, понял». Ширина width становится лимитом на всё про всё.
div {
box-sizing: border-box; /* Включаем режим «не еби мозг» */
width: 100px; /* ВСЯ хуйня, включая бордюры и отступы */
padding: 10px; /* Отступы ВХОДЯТ в эти 100px */
border: 5px solid; /* И бордюры тоже */
/* Итог на тарелке: ровно 100px. А сам контент внутри сожмётся до 70px. Красота, бля! */
}Короче, все адекватные люди в начале проекта пишут * { box-sizing: border-box; } и живут спокойно. А то на content-box можно с ума сойти, честное слово. В рот меня чих-пых, сколько времени на этой хуйне убил, пока не понял!