Box sizing в CSS — что это? - коротко
Свойство box-sizing задаёт, какие части элемента учитываются при расчёте его ширины и высоты. При значении border-box в размер включаются padding и граница, а при content-box учитывается только содержимое.
Box sizing в CSS — что это? - развернуто
Box‑sizing — это CSS‑свойство, которое определяет, какие части коробки элемента учитываются при вычислении её ширины и высоты. По умолчанию браузер использует модель «content‑box», когда в заданные размеры включается только содержимое, а границы и внутренний отступ (padding) добавляются сверху. Это приводит к тому, что реальная визуальная ширина элемента оказывается больше, чем указано в свойствах width/height, что часто усложняет построение макетов.
Существует два основных значения свойства:
- content-box – сохраняет традиционное поведение, где width/height описывают только контент. Границы и padding увеличивают итоговый размер блока.
- border-box – заставляет браузер включать padding и границы в указанные размеры. То есть width/height становятся окончательной границей визуального элемента, а внутреннее пространство распределяется внутри этой границы.
Дополнительные варианты, такие как padding-box, поддерживаются лишь в отдельных браузерах и не являются частью стандарта, поэтому их применение рекомендуется ограничить экспериментальными задачами.
Переход к модели border‑box упрощает адаптивную верстку: при изменении ширины контейнера элементы сохраняют ожидаемые пропорции, а расчёты отступов становятся предсказуемыми. Для глобального применения часто используют следующий приём:
*, *::before, *::after {
box-sizing: border-box;
}Эта запись гарантирует, что все элементы, а также их псевдоэлементы, будут учитывать padding и border в заданных размерах, что устраняет необходимость постоянного пересчёта при добавлении отступов.
Важно помнить, что box-sizing влияет только на расчёт размеров, но не меняет визуальное отображение границ и отступов. Свойства margin остаются внешними и по‑прежнему добавляются к общей ширине и высоте элемента, поэтому при планировании расположения блоков их следует учитывать отдельно.
Совместимость свойства охватывает все современные браузеры, включая мобильные версии, а также старые версии Internet Explorer 8 и новее. Для поддержки более старых браузеров иногда добавляют префиксы, но в практике они уже почти не требуются.
Практический совет: при работе с сетками, карточками и другими компонентами, где важна точность размеров, сразу задавайте border‑box на уровне всего документа. Это экономит время, избавляет от лишних расчётов и делает код более читаемым. Если же требуется отдельный элемент с традиционной моделью, достаточно переопределить свойство только для него. Такой подход обеспечивает гибкость и предсказуемость поведения всех элементов страницы.