У блока несколько областей
Содержимое занимает центральную часть. Внутренний отступ, padding, располагается между содержимым и границей. Border обозначает саму границу, а margin относится к внешнему отступу. Эти области решают разные задачи, поэтому замена одной другой может изменить поведение макета. Например, фон элемента распространяется иначе, чем пустое пространство внешнего отступа. Для первого расчёта полезно нарисовать вложенные прямоугольники и подписать каждую величину. Так становится видно, относится ли число к текстовой области или ко всему участку до внешнего края границы.
Режим box-sizing меняет смысл ширины
При content-box заданная ширина описывает область содержимого. Если она равна 240 пикселям, внутренние отступы слева и справа по 16, а границы по 2, размер до внешнего края границ составит 276 пикселей. При border-box та же заданная ширина 240 включает содержимое, оба внутренних отступа и обе границы. Тогда для содержимого остаётся 204 пикселя. Внешние отступы в эту ширину не включаются. Важно не запоминать один итог для всех случаев, а сначала определить режим и перечислить слагаемые. Оба подхода имеют определённый смысл и требуют последовательного использования.
Верный расчёт не гарантирует удобство содержимого
Даже когда внешний размер совпал с замыслом, текст может переноситься иначе, длинное слово — выходить за доступное место, а фиксированная высота — скрывать часть содержимого. Поэтому коробочная модель является одной частью проверки. Полезно менять длину текста и ширину области, наблюдая результат. Инструменты разработчика браузера позволяют увидеть вычисленные размеры и отступы, что помогает сравнить ожидание с фактом. При этом визуально удобный блок не заменяет осмысленную структуру документа. Порядок чтения и назначение элементов стоит проверять отдельно от геометрии.
Попробуйте на практике
Рассчитайте карточку на бумаге в двух режимах box-sizing. Используйте ширину 240 пикселей, padding по 16 и border по 2 с каждой стороны.
- Нарисуйте содержимое, внутренние отступы и границы. Отдельно подпишите, что внешний margin пока не задан.
- Для content-box сложите ширину содержимого, два внутренних отступа и две границы. Получите размер до внешнего края.
- Для border-box начните с общей ширины 240 и вычтите внутренние отступы и границы. Найдите доступную ширину содержимого.
- Увеличьте padding с обеих сторон до 20, сохранив остальные числа. Пересчитайте оба варианта и объясните, какая область изменилась.
- Придумайте проверку с длинной подписью. Укажите, почему правильная арифметика ширины ещё не подтверждает читаемость и отсутствие переполнения.
Как проверить результат. При padding 16 результаты равны 276 пикселям снаружи для content-box и 204 для содержимого border-box. При padding 20 получаются соответственно 284 и 196. Внешний margin в расчёт не включён.
Частые вопросы
Border-box включает внешний отступ?
Нет. Он включает содержимое, padding и border в заданный размер, а margin остаётся отдельной областью. Его влияние на расположение нужно рассматривать дополнительно.
Можно ли исправить любой выход текста уменьшением шрифта?
Это может скрыть симптом, но не объясняет причину. Нужно проверить доступную область, переносы, ограничения размеров и само содержимое, сохраняя читаемость.
Самостоятельный разбор темы. Содержание конкретной обучающей программы здесь не представлено.