CSS Box Model: отступы, рамки и padding

Книга по CSS на столе

В этом руководстве вы подробно разберёте модель коробки, научитесь применять margin, border и padding, увидите распространённые ошибки и получите чеклисты и сниппеты для повседневной работы.

Что такое модель коробки (Box Model)

Модель коробки — это абстракция, которая представляет каждый HTML-элемент как прямоугольник с четырьмя уровнями: содержимое, padding, border и margin. Понимание порядка этих слоёв и их взаимодействия помогает предсказать итоговый размер и поведение элемента.

Схема модели коробки

Краткое определение терминов:

Содержимое: фактический контент элемента (текст, изображение и т.д.).
Padding (внутренний отступ): пространство между содержимым и границей.
Border (граница): видимая рамка вокруг padding.
Margin (внешний отступ): пространство между границей и соседними элементами.

По умолчанию браузеры задают некоторые значения по умолчанию для отдельных элементов (например, у абзаца p часто есть вертикальные отступы). Эти значения зависят от user agent стилей.

Как работает margin

Свойство margin управляет внешними отступами и имеет четыре составляющие—margin-top, margin-right, margin-bottom, margin-left. Их можно задать по отдельности или с помощью сокращённой записи.

Структура сокращённой записи margin

Selector {
    margin: margin-top margin-right margin-bottom margin-left;
}

Правила сокращённой записи:

1 значение: применяется ко всем четырём сторонам.
2 значения: первый — для top/bottom, второй — для right/left.
3 значения: первый — top, второй — right/left, третий — bottom.
4 значения: top, right, bottom, left.

Примеры:

p{
    margin: 20px 10px 20px 10px; /* top right bottom left */
}

p{
    margin: 20px 10px; /* top/bottom 20px, left/right 10px */
}

p{
    margin: 20px; /* все стороны 20px */
}

Важно: margin может принимать отрицательные значения, что полезно для специально рассчитанных перекрытий, но это может мешать потоку документа и вызывать неожиданные эффекты.

Как работает border

Border — это третий слой в модели коробки. У border есть несколько под-свойств, и для появления рамки обязательно должен быть задан border-style (по умолчанию border-style: none).

Базовая структура border

Selector{
    border: border-style;
}

Пример простого видимого бордера:

p{
    border: solid;
}

Стороны можно задавать отдельно:

border-left
border-right
border-top
border-bottom

Сокращённая запись border с шириной и цветом

p{
    border: 2px solid red; /* border-width border-style border-color */
}

/* или для одной стороны */
.box{
    border-left: 4px dashed #357edd;
}

Полезные варианты border-style: solid, double, dotted, dashed, groove, ridge, inset, outset, none. (Список не исчерпывающий — некоторые значения имеют специфический визуальный эффект.)

Заметьте: если задан цвет, ширина и стиль, браузер отрисует рамку; если стиль none — рамка невидима, даже при указанных ширине и цвете.

Как работает padding

Padding — внутренний отступ между содержимым и рамкой. Он действует внутри border и влияет на внутренний визуальный отступ.

Правила сокращённой записи padding аналогичны margin:

p{
    padding: 20px 20px 20px 20px; /* четыре значения */
}

p{
    padding: 20px 20px; /* top/bottom 20px, left/right 20px */
}

p{
    padding: 20px; /* все стороны 20px */
}

Padding не может быть отрицательным.

Пример: базовый HTML и визуализация слоёв




    
    The Box Model


    
        Heading One
        
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
        Impedit rem recusandae id est. Rem, quod odio. Doloremque nemo libero,
        fuga suscipit dignissimos soluta iusto ullam ducimus rerum labore necessitatibus facilis.
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
        Impedit rem recusandae id est. Rem, quod odio. Doloremque nemo libero,
        fuga suscipit dignissimos soluta iusto ullam ducimus rerum labore necessitatibus facilis.
    
    
    
        Heading Two
        
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
        Impedit rem recusandae id est. Rem, quod odio. Doloremque nemo libero,
        fuga suscipit dignissimos soluta iusto ullam ducimus rerum labore necessitatibus facilis.
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
        Impedit rem recusandae id est. Rem, quod odio. Doloremque nemo libero,
        fuga suscipit dignissimos soluta iusto ullam ducimus rerum labore necessitatibus facilis.

Результат в браузере (схематическое изображение):

Макет базового HTML-документа

Пошаговое применение: border, margin, padding

Начнём с видимой рамки, затем добавим внешний и внутренний отступы.

1) Сделать рамку видимой

.box{
    border: solid;
}

Результат: рамка стала видимой. В примере в исходном визуале рамка имела толщину по умолчанию (в демонстрации 3px), но в реальном проекте всегда задавайте явную ширину и цвет.

Видимость border после добавления свойства

2) Добавить внешний отступ (margin)

.box{
    border: solid;
    margin: 20px;
}

Margin создаёт пространство между соседними блоками.

Результат после добавления margin

3) Добавить внутренний отступ (padding)

.box{
    border: solid;
    margin: 20px;
    padding: 10px;
}

Padding отодвигает содержимое от рамки внутрь.

Результат после добавления padding

Использование padding показано на изображении

Полезные приёмы и рекомендации

Всегда явным образом задавайте box-sizing: border-box для предсказуемых размеров элементов. Это делает так, что padding и border учитываются внутри заданной ширины/высоты.

*, *::before, *::after {
    box-sizing: border-box;
}

Используйте сокращённую запись там, где это экономит код, но не жертвуйте читаемостью.
Для дизайна, основанного на сетке, предпочитайте margin для внешних отступов между колонками и padding для внутреннего пространства компонентов.
Для создания горизонтального пространства между inline-block элементами лучше использовать gap в flex/grid, а не margin, если доступно.

Частые ошибки и ловушки

Схлопывание вертикальных margin: смежные вертикальные margin между блоковыми элементами могут схлопываться в один — результат будет равен максимальному из двух margin, а не их сумме. Это нормальное поведение CSS и один из частых сюрпризов.
Непредсказуемые общие размеры: если width задана явно, padding и border добавляются к общей ширине по умолчанию. Установка box-sizing: border-box делает размеры более удобными.
Невидимый border: если задана ширина и цвет, но не задан border-style — рамка не появится (border-style по умолчанию none).
Отрицательные margin: они полезны, но могут ломать доступность и поток документа, используйте осторожно.

Современные альтернативы и расширения

box-sizing: border-box — облегчает расчёт ширины/высоты, рекомендовано для большинства проектов.
gap (в Flexbox и Grid) — удобнее для управления пространством между элементами без сложных правил margin.
CSS logical properties (margin-block, margin-inline, padding-block, padding-inline) — полезны для локализации и поддержки разных направлений текста (LTR/RTL).

Мини-методология: как подойти к отступам в компоненте

Определите внешний контейнер компонента и задайте ему box-sizing: border-box.
Установите padding для внутреннего межконтентного пространства.
Используйте margin для внешнего расстояния между компонентами.
Для тонкой настройки применяйте border для визуального разделения; задавайте стиль, цвет и ширину явно.
Тестируйте при разных ширинах экрана и с реальным контентом.

Чеклист ролей (Designer / Developer / QA)

Designer:
- Указывает желаемые отступы и визуальные рамки в дизайн-системе.
- Предпочитает использование gap для сеток.
Developer:
- Применяет box-sizing: border-box в глобальных стилях.
- Явно задаёт border-style, width и color при необходимости.
- Использует logical properties при локализации.
QA:
- Проверяет схлопывание margin в мобильной вёрстке.
- Тестирует поведение при увеличенном размере шрифта (accessibility).

Критерии приёмки

Все компоненты выглядят согласно макету на стандартных разрешениях.
Размеры контейнеров предсказуемы при изменении padding/border.
Нет нежелательных схлопываний или перекрытий контента.
Вёрстка корректно работает при RTL, если это требуется.

Кейсы, когда модель коробки «не работает» как ожидалось

При абсолютном позиционировании (position: absolute) элементы больше не участвуют в обычном потоке, поэтому margin в отношении соседей может не влиять.
При использовании transform: translate() визуальное положение меняется, но поток остаётся прежним.

Быстрая шпаргалка (cheat sheet)

margin: 1 value → all sides
margin: 2 values → vertical | horizontal
margin: 3 values → top | horizontal | bottom
margin: 4 values → top | right | bottom | left
padding — те же правила
border: width style color
box-sizing: content-box (по умолчанию) или border-box (рекомендуется)

Короткий глоссарий (1 строка на термин)

box model — модель, описывающая слои элемента: content → padding → border → margin.
margin collapse — поведение, при котором соседние вертикальные margin объединяются.
box-sizing — свойство, определяющее, учитываются ли padding и border в ширине/высоте.

Часто задаваемые вопросы

Как сделать так, чтобы padding не увеличивал ширину элемента?

Установите box-sizing: border-box; тогда padding и border будут включены в указанную ширину.

Почему два соседних элемента имеют меньше расстояния, чем ожидалось?

Вероятно, сработало схлопывание вертикальных margin. Решения: обернуть элементы, использовать padding вместо margin или применить overflow: auto / display: flow-root.

Можно ли задать разные цвета для каждой стороны border?

Да, можно: border-top-color, border-right-color, border-bottom-color, border-left-color.

Примеры приёмов и шаблоны

Карточка с тенью и отступами:

.card{
    box-sizing: border-box;
    border: 1px solid #e0e0e0;
    padding: 16px;
    margin: 12px;
    border-radius: 8px;
    background: #fff;
}

Горизонтальное пространство между колонками (Flexbox):

.row{
    display: flex;
    gap: 16px; /* предпочтительнее, чем margin между элементами */
}

Ментальные модели и эвристики

“Внутри наружу”: сначала думайте о содержимом, затем добавляйте padding, потом border, затем margin для позиционирования.
“Box-sizing как средство контроля”: если хотите, чтобы блок оставался в заданных границах — используйте border-box.

Заключение

Понимание модели коробки — базовый навык фронтенд-разработчика. Контроль padding, border и margin в сочетании с box-sizing и современными инструментами (gap, logical properties) даёт надёжный и предсказуемый результат. Экспериментируйте с примерами выше и включайте проверки в процесс приёма работы.

Если хотите, я могу сгенерировать готовые сниппеты для вашей дизайн-системы или составить тест-кейсы для проверки вёрстки на разных устройствах.

Модель коробки CSS: от отступов до границ