Свойство box-sizing: размер блока
Почему width не всегда равен видимой ширине и как помогает border-box.
Как это работает
box-sizing меняет способ расчёта width и height. При content-box эти размеры относятся только к содержимому; рамки и внутренние отступы добавляются снаружи. При border-box они уже входят в заданный размер.
Для интерфейсов удобно включить border-box у всех элементов и псевдоэлементов. Это упрощает сетки и формы: поле шириной 100% не выходит за контейнер только из-за padding. Внешние margin не входят в размер ни при одном из режимов.
Пример в интерфейсе
.box { width: 220px; padding: 20px; border: 2px solid #11694e; margin-bottom: 12px; }
.border-box { box-sizing: border-box; }Значения и поведение
| Значение или правило | Результат |
|---|---|
| content-box | width относится к области содержимого. |
| border-box | width включает padding и border. |
| margin | Всегда учитывается отдельно от width. |
На что обратить внимание
border-box не предотвращает любое переполнение. Длинная строка без переносов или фиксированная ширина дочернего элемента всё равно могут выйти за пределы.
Проверьте на практике
У двух блоков задайте width: 220px, padding: 20px и border: 2px. Сравните итоговую ширину при разных box-sizing.
Попробуйте сами
РЕЗУЛЬТАТ · ИЗОЛИРОВАННЫЙ ПРЕДПРОСМОТР
Измените код и нажмите «Запустить». JavaScript и внешние запросы отключены.
Самостоятельный учебный материал. Техническая документация: первоисточник по теме ↗. Если результат отличается, проверьте код и версию браузера.