У блока есть несколько разных областей
Внутри находится область содержимого: текста, изображения или других элементов. Вокруг неё могут располагаться внутренние отступы, затем граница. Внешние отступы задают расстояние относительно соседних элементов и находятся за пределами границы. Эти части нельзя считать взаимозаменяемыми. Внутренний отступ отделяет содержимое от края самого блока, а внешний участвует в его расположении среди соседей. Изменение одного вместо другого может дать похожее расстояние в простой картинке, но другой смысл и поведение. Поэтому перед исправлением вёрстки полезно назвать проблему точно: текст слишком близок к рамке или весь блок слишком близок к соседнему? Правильный вопрос помогает выбрать нужное свойство, а не добавлять случайные числа.
Режим расчёта определяет, что включено в ширину
В режиме content-box заданная ширина относится к содержимому. Если она равна 200 пикселям, слева и справа добавлены внутренние отступы по 20 и границы по 2 пикселя, наружная ширина до края границы получится 244 пикселя. В режиме border-box те же 200 пикселей включают содержимое, внутренние отступы и границы. Поэтому при тех же добавках для содержимого остаётся 156 пикселей. Внешние отступы в этот размер не входят. Различие не означает, что один режим неправильный. Важно понимать выбранное правило и применять его последовательно. Если два элемента используют разные предположения о размере, они могут неожиданно перестать помещаться рядом, хотя указанная ширина выглядит одинаковой.
Проверяйте фактический размер и содержание
Инструменты разработчика в браузере показывают области коробочной модели и вычисленные значения. Это помогает сравнить ожидание с реальным результатом. Но сначала полезно посчитать простой случай вручную, чтобы понимать, что именно проверяется. Также содержимое может создавать отдельные трудности: длинное неразрывное слово или изображение способны выходить за ожидаемые границы при неподходящих правилах. Коробочная модель объясняет размеры областей, но не отменяет проверку поведения самого содержимого. Для адаптивной страницы важно смотреть на разные доступные ширины. Блок, который помещается в одном окне, может вести себя иначе в другом. Уменьшение шрифта не является универсальным решением: иногда нужно пересмотреть ширину, перенос или компоновку. HTML при этом описывает структуру и смысл элементов, а CSS управляет их представлением. Исправление расстояния не должно разрушать понятную структуру документа. Хорошая начальная практика связывает смысл элемента с предсказуемым отображением.
Попробуйте на практике
Рассчитайте ширину одного учебного блока в двух режимах.
- Запишите ширину 200 пикселей, внутренние отступы по 20 и границы по 2 с каждой стороны. Внешние отступы пока не добавляйте.
- Для content-box сложите содержимое, два внутренних отступа и две границы. Назовите наружную ширину до края границы.
- Для border-box сохраните наружную ширину 200 и найдите доступную ширину содержимого.
- Нарисуйте обе схемы и подпишите области. Если есть собственная учебная страница, сравните расчёт с инструментами браузера, не меняя рабочий сайт.
Как проверить результат. В первом режиме наружная ширина равна 244 пикселям, во втором содержимое занимает 156. Внутренние и внешние отступы не смешаны.
Частые вопросы
Border-box включает внешний отступ?
Нет. В заданный размер входят содержимое, внутренние отступы и границы. Внешний отступ расположен за ними.
Одинаковая ширина в CSS всегда даёт одинаковое пространство для текста?
Нет. Нужно учитывать режим расчёта, внутренние отступы и границы. При одинаковой наружной ширине содержимое может получать разное место.
Самостоятельный разбор темы. Содержание конкретной обучающей программы здесь не представлено.