Box Sizing в CSS
Вы уже знаете, что padding и border могут сделать бокс шире объявленного width. box-sizing выбирает правило этой арифметики: width — это «только content» или «content плюс padding плюс border»?
Две модели одним взглядом
📊 content-box против border-box
| Модель | Что покрывают width / height |
Повседневный эффект |
|---|---|---|
content-box (по умолчанию) |
Только content | Padding и border добавляются снаружи объявленного размера |
border-box |
Content + padding + border | Объявленный размер — внешний край border; content сжимается |
| Margin | Не входит ни в одну | Внешний зазор остаётся отдельным от box-sizing |
По умолчанию: content-box
В модели по умолчанию width: 200px измеряет content. Добавьте padding и border — окрашенный бокс растёт.
Content-box (по умолчанию)
css.panel-content {
box-sizing: content-box;
width: 200px;
padding: 20px;
border: 4px solid #0f766e;
background-color: #ccfbf1;
}
/* Content 200px + padding + border → общая ширина больше */Перейдите на border-box
С border-box тот же width: 200px включает padding и border. Внешний край ближе к 200px; область content становится меньше.
Размер border-box
css.panel-border {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 4px solid #0f766e;
background-color: #99f6e4;
}
/* Внешний border-box целится в 200px; content сжимается */Одни числа, разный след
Поставьте обе модели рядом с одинаковыми width, padding и border.
Сравнить две модели
css.contenty {
box-sizing: content-box;
width: 180px;
padding: 16px;
border: 6px solid #b45309;
background-color: #fef3c7;
}
.borderish {
box-sizing: border-box;
width: 180px;
padding: 16px;
border: 6px solid #b45309;
background-color: #fde68a;
}
/* Одинаковые объявления; .contenty занимает больше горизонтального места */Почему командам нравится border-box
Когда карточка должна точно заполнить колонку — например width: 100% с padding — border-box не даёт ей вылезти за родителя.
Карточка, дружелюбная к колонке
css.card {
box-sizing: border-box;
width: 100%;
padding: 1.25rem;
border: 1px solid #cbd5e1;
background-color: #ffffff;
}Спокойная глобальная привычка
Многие таблицы стилей один раз ставят border-box на всё, чтобы повседневный расчёт ширины был предсказуемым. Margin по-прежнему снаружи.
Универсальная привычка border-box
css*,
*::before,
*::after {
box-sizing: border-box;
}Попробуйте сами
- Соберите
.panel-contentсwidth: 200px, padding и border при content-box. - Скопируйте в
.panel-borderсbox-sizing: border-box— смотрите, как внешний размер ближе к 200px. - Поставьте
.contentyи.borderishрядом с теми же числами. - Сделайте карточку
width: 100%с padding; переключайте box-sizing и смотрите, какая вылезает. - Попробуйте универсальную привычку
*на маленькой демо-странице.
Частые ошибки
- Думать, что border-box включает ещё и margin (нет)
- Забывать, что по умолчанию content-box, пока вы не смените
- Ждать, что outline последует за box-sizing (outline снаружи и по-прежнему не занимает место в раскладке)
- Писать
width: 100%с жирным padding при content-box и удивляться переполнению - Мешать проценты, не зная, какая модель размера активна
Кратко
- По умолчанию
box-sizing: content-boxизмеряет content; padding и border добавляются border-boxдержит padding и border внутри объявленной ширины/высоты- Margin вне обеих моделей
- Border-box часто упрощает ширины колонок и карточки
width: 100% - Универсальный сброс border-box — обычная спокойная привычка
🧠 Проверьте Свои Знания
Проверьте Свои Знания
Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему
📝 Инструкции
- Внимательно прочитайте каждый вопрос
- Выберите лучший ответ на каждый вопрос
- Вы можете пересдавать тест столько раз, сколько захотите
- Ваш прогресс будет показан вверху