Модель блока CSS: margin, border и padding

Кратко

Эта статья объясняет модель блока CSS — как content, padding, border и margin работают вместе. Вы получите понятные определения, практические примеры, подсказки для отладки и краткую шпаргалку по свойствам.

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

Свойства CSS margin, border и padding оформляют каждый HTML-элемент и определяют, как он занимает пространство на странице. Вместе эти слои создают «модель блока» — простой и мощный способ мыслить о вёрстке.

В этой статье мы подробно разберём модель блока, приведём практические примеры, перечислим распространённые ошибки, предложим альтернативные приёмы и дадим чек-листы для разных ролей.

Что такое модель блока?

Модель блока — это представление каждого HTML-элемента как прямоугольника с четырьмя слоями, идущими от центра наружу:

Контент (content) — место, где расположен текст или вложенные элементы. Коротко: содержимое элемента.
Внутренний отступ (padding) — пространство между контентом и рамкой.
Рамка (border) — видимая линия вокруг padding и content; может иметь стиль, ширину и цвет.
Внешний отступ (margin) — пространство вокруг рамки, отделяющее элемент от соседей.

Схема модели блока (контент, padding, border, margin)

Определения в одну строку:

Content: область с реальным содержимым.
Padding: внутренний отступ между содержимым и рамкой.
Border: видимая граница; требует border-style для отображения.
Margin: внешнее пространство вокруг рамки; может «схлопываться» в особых случаях.

Важно: разные браузеры задают некоторые значения по умолчанию для HTML-элементов. Например, у

часто есть margin по вертикали около 16px в типичных стилях браузера.

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

Свойство margin управляет внешним пространством вокруг элемента. Оно поддерживает четыре под-свойства:

margin-top
margin-right
margin-bottom
margin-left

И удобный сокращённый синтаксис margin.

Структура свойства margin

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

Порядок значений (в сокращённой записи) обычно даётся так: top, right, bottom, left. Но есть сокращения:

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

Примеры

p{
    margin: 20px 10px 20px 10px;
}

То же самое короче:

p{
    margin: 20px 10px;
}

И вариант для одинаковых отступов:

p{
    margin: 20px;
}

Советы и нюансы по margin:

margin: auto; часто используется для горизонтального центрирования блочных элементов при заданной width.
margin может принимать отрицательные значения, что позволяет «сдвигать» элементы ближе друг к другу.
inline-элементы (например, span) игнорируют вертикальные margin; поведение зависит от display.

Распространённая проблема: схлопывание margin (margin collapse)

Если два вертикальных margin соседних блочных элементов соприкасаются, браузер может объединить их в один (берётся максимальное или один из них в зависимости от контекста). Это чаще всего происходит между родителем и первым/последним дочерним элементом или между соседними блоками.

Пример обхода:

Задать padding или border у родителя.
Использовать overflow: auto; у родителя.
Применить display: flex; для контейнера — тогда схлопывания не будет.

Разбор свойства border

Border — третий слой модели блока. У border есть собственные под-свойства и сокращённая форма записи.

Минимально необходимое для видимой рамки — это свойство border-style. По умолчанию border-style: none;, поэтому рамка не отображается.

Простая запись border

Selector{
  border: border-style;
}

Чтобы сделать сплошную рамку вокруг параграфа:

p{
  border: solid;
}

Но чаще используют трёхчастный стек: ширина, стиль и цвет:

p{
  border: 2px solid red;
}

Вы можете применять стек к отдельной стороне, например border-left: 2px solid red;.

Под-свойства для сторон:

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

Популярные значения border-style:

solid
double
dotted
dashed

В примере в статье наблюдается, что при простом указании border: solid; браузер отобразил видимую рамку с шириной 3px. Это поведение может зависеть от браузера и режима отображения.

Отдельно: outline — внешняя линия, похожая на border, но она не входит в модель блока и не влияет на размер элемента.

Что такое padding и как его применять

Padding — внутренний отступ между содержимым и рамкой. Синтаксис и правила сокращения схожи с margin.

Под-свойства:

padding-top
padding-right
padding-bottom
padding-left

Правила сокращения те же:

1 значение — ко всем сторонам
2 значения — vertical / horizontal
3 значения — top / horizontal / bottom
4 значения — top / right / bottom / left

Примеры эквивалентных записей:

Четыре значения

p{
  padding: 20px 20px 20px 20px;
}

Два значения

p{
  padding: 20px 20px;
}

Один значение

p{
  padding: 20px;
}

Важно: процентное значение padding (%) рассчитывается от ширины содержащего блока, даже если применяется к вертикальной стороне. Это частая причина неожиданных результатов при адаптивной верстке.

Пример: объединение margin, border и padding

Ниже стандартный HTML пример из статьи. Он показывает два div с заголовком и абзацем.




    
    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-документа с двумя блоками

В исходной разметке у div обычно margin, border и padding равны 0, если не заданы CSS. После поэтапного включения border, margin и padding вывод и визуализация элементов становятся понятнее.

По шагам: видимая рамка

.box{
    border: solid;
}

Рамка становится видимой. В одном браузерном примере по умолчанию ширина видимой рамки составила 3px.

Использование свойства border

Добавим margin:

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

Теперь между блоками появилось пространство.

Использование свойства margin

И, наконец, padding:

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

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

Использование свойства padding

Box model, показывающая все используемые слои

Когда модель блока ведёт себя не так, как ожидается (когда это не работает)

Схлопывание вертикальных margin между родителем и первым/последним ребёнком или между соседними блоками.
Различное поведение inline-элементов: vertical margin на них часто не применяется.
Проценты в padding зависят от ширины контейнера, а не от высоты — может вводить в заблуждение.
width и height по умолчанию относятся только к content-box (см. box-sizing ниже). Если вы хотите, чтобы padding и border входили в общую ширину, используйте box-sizing: border-box;.

Альтернативы и современные приёмы

Если вам нужно управлять расстояниями между элементами, можно использовать альтернативы, которые порой проще и семантически предпочтительнее:

Flexbox и gap: display: flex; gap: 16px; — управляет расстоянием между флекс-элементами без использования margin.
Grid и gap для сеточной компоновки.
transform: translateX/Y для визуального смещения без изменения flow; будьте осторожны с доступностью.
CSS Custom Properties (переменные) для единообразного управления отступами.

Пример использования gap:

.container{
  display: flex;
  gap: 20px;
}

Преимущество gap — это отсутствие проблем со схлопыванием margin и более предсказуемое поведение при динамическом добавлении элементов.

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

Модель слоя: думайте о каждом элементе как о коробке с содержимым, затем padding, затем border, затем margin.
Debug-first: чтобы быстро понять проблему, временно задайте разным слоям фон/цвет рамки (например, background: rgba(…) / border: 1px dashed magenta).
Centering-алгоритм: margin-left/right: auto при фиксированной ширине централизует блок по горизонтали.
Box-sizing-правило: если хотите, чтобы общая ширина включала padding и border — выставьте box-sizing: border-box;.

Набор практических шагов для отладки (мини-методология)

Откройте DevTools (инструменты разработчика).
Выберите проблемный элемент.
Включите визуализацию модели блока (в некоторых инструментах есть «box model» визуализация).
Временно задайте явно border и background различным цветом.
Проверьте display (block, inline-block, inline, flex, grid).
Если используются проценты — проверьте контекст (ширина родителя).
Попробуйте box-sizing: border-box; и сравните.
Для схлопывания margin — добавьте padding или border у родителя, или используйте display: flex;.

Шпаргалка (cheat sheet)

margin: top right bottom left;
padding: top right bottom left;
border:

Модель CSS-блока: margin, border и padding