Что означает термин#
Свойство box-sizing определяет, как width и height соотносятся с содержимым, padding и border. При content-box заданная ширина относится к содержимому; при border-box включает также внутренние отступы и границы. Внешний margin не включается в объявленную ширину в обоих случаях.
Практический пример#
У блока width: 200px, padding: 20px и border: 1px. При content-box ширина области до внешних границ составит 242px, а при border-box — 200px. Это учебный расчёт без дополнительных ограничений ширины и особенностей раскладки. Он помогает объяснить неожиданное переполнение узкого контейнера.
Как проверить#
Выберите элемент в DevTools и посмотрите схему Box model вместе с вычисленным box-sizing. Проверьте min-width, max-width и стили дочерних элементов, если расчёт не совпадает с ожиданием. После исправления протестируйте длинный текст и узкий экран: отсутствие переполнения на пустом блоке не доказывает устойчивость реального интерфейса.
Источники#
Проверены 23 октября 2026 г.. Официальные рекомендации отделены от наших примеров и результатов проверки.