Четыре области решают разные задачи
В центре находится содержимое: например, текст или изображение. Вокруг него расположен padding, внутренний отступ. Далее идёт border, рамка. За ней находится margin, внешний отступ, который отделяет элемент от соседей. Эти области нельзя считать разными названиями одного свободного места. Фон обычно распространяется на внутренние области блока, тогда как margin остаётся снаружи. При поиске ошибки полезно сначала определить, какой именно промежуток требуется изменить: расстояние от текста до рамки или расстояние между двумя элементами.
В режиме content-box ширина относится к содержимому
Для учебного примера зададим width равным 300 пикселям, padding по 20 пикселей слева и справа и border по 2 пикселя. При content-box внешняя ширина рамки составит 344 пикселя: к 300 добавляются 40 внутренних отступов и 4 рамки. Если с обеих сторон дополнительно задан margin по 10 пикселей, горизонтальное место вместе с ним составит 364 пикселя в этой простой модели. Поэтому два элемента с одинаковым width могут занимать разную ширину при разных отступах и рамках.
Border-box меняет смысл указанного размера
При box-sizing со значением border-box заданные 300 пикселей включают содержимое, padding и border. С теми же внутренними отступами и рамкой для содержимого останется 256 пикселей. Внешний margin по-прежнему не входит в эти 300: вместе с двумя отступами по 10 элемент займёт 320 пикселей по горизонтали в рассматриваемом примере. Такой режим часто упрощает расчёт размеров, но не отменяет необходимость понимать области. Он также не решает автоматически все вопросы переноса текста и расположения соседей.
Проверяйте условие задачи, а не только число
В реальной странице на размер могут влиять ограничения минимальной и максимальной ширины, flex- или grid-компоновка и содержимое. Здесь они специально исключены, чтобы увидеть основное правило. В инструментах разработчика браузер показывает вычисленные размеры и области коробочной модели; полезно сравнивать их с ожидаемыми. Не стоит исправлять расхождение случайным уменьшением width, не выяснив его причину. Иначе следующая смена текста или отступа снова сломает расчёт. Понятная модель позволяет объяснить изменение, а не только добиться нужного вида один раз.
Попробуйте на практике
Рассчитайте две версии одного блока на бумаге.
- Нарисуйте вложенные прямоугольники содержимого, padding и border, а margin отметьте за внешней рамкой.
- Для content-box запишите width 300, боковые padding 20, border 2 и margin 10 пикселей. Вычислите ширину до внешней границы рамки и место вместе с margin.
- Повторите расчёт для border-box с теми же числами. Отдельно найдите доступную ширину содержимого.
- Увеличьте боковой padding до 30 пикселей и объясните, что изменится в каждом режиме, сохранив заданный width.
Как проверить результат. Сначала получаются 344 и 364 пикселя для content-box; для border-box —300 до рамки,320 вместе с margin и 256 для содержимого. При padding 30 content-box становится шире, а у border-box уменьшается область содержимого.
Частые вопросы
Margin входит в border-box?
Нет. Border-box включает содержимое, внутренние отступы и рамку. Внешний отступ рассматривается отдельно.
Почему одинаковый CSS может выглядеть иначе с другим текстом?
Содержимое взаимодействует с доступным пространством: меняются переносы и высота. Коробочная модель помогает считать области, но не делает любой текст одинаковым по размерам.
Нужно ли запоминать все свойства сразу?
Для этого упражнения достаточно различать четыре области и два режима размера. Затем можно добавлять ограничения и способы компоновки, не смешивая их с базовым правилом.
Самостоятельный разбор темы. Содержание конкретной обучающей программы здесь не представлено.