Отступы в HTML и CSS: первые шаги с margin и padding

К концу этого гайда вы будете понимать, откуда берётся пустое место вокруг блоков на странице, чем внешний отступ отличается от внутреннего и почему заданные вами 20 пикселей между двумя абзацами превращаются в 20, а не в 40. Времени займёт минут 30–40, если параллельно открыть браузер и повторять примеры. Всё, что нужно заранее: любой текстовый редактор (подойдёт даже «Блокнот»), браузер и умение сохранить файл с расширением .html.

Проверять результат будем через инструменты разработчика — они встроены в Chrome, Firefox и Edge, открываются клавишей F12. Именно там видно, как браузер раскладывает отступы, и это главный инструмент, а не угадывание цифр.

Два вида отступов: margin и padding

У любого блока в CSS есть две зоны пустого пространства. Внутренняя — между содержимым блока и его границей. Внешняя — между границей блока и соседями. Первая задаётся свойством padding, вторая — margin. Путаница между ними — причина большинства проблем с вёрсткой у новичков.

Представьте фотографию в рамке. Расстояние от края снимка до рамки — это padding: оно внутри, оно окрашивается фоном блока. Расстояние от рамки до соседней рамки на стене — это margin: оно снаружи, фоном не заливается, оно прозрачно.

padding раздвигает содержимое внутри блока. margin отодвигает сам блок от соседей. Если фон «залез» не туда, куда вы ждали, — вы почти наверняка перепутали эти два свойства.

Соберите маленький файл и убедитесь сами. Сохраните как test.html и откройте в браузере:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <style>
    .box {
      background: #d6e4ff;   /* фон видит только padding */
      border: 2px solid #3b82f6;
      padding: 20px;         /* внутренний отступ */
      margin: 30px;          /* внешний отступ */
    }
  </style>
</head>
<body>
  <div class="box">Текст внутри блока</div>
</body>
</html>

В браузере вы увидите голубой прямоугольник с синей рамкой. Голубой фон отступает от текста на 20 пикселей — это padding. А сам прямоугольник отодвинут от краёв окна на 30 пикселей белого пространства — это margin, и он остался белым, а не голубым. Откройте F12, наведите на блок — браузер подсветит margin оранжевым, а padding зелёным. Запомните эти цвета, они одинаковые во всех браузерах.

Как задавать отступы с каждой стороны

И у margin, и у padding есть четыре стороны. Управлять ими можно тремя способами.

1. Все четыре стороны сразу: margin: 20px; — по 20 пикселей сверху, справа, снизу и слева.
2. Отдельным свойством для стороны: margin-top: 20px;, а также margin-right, margin-bottom, margin-left. Понятно и без запоминания порядка.
3. Сокращённой записью в одну строку. Здесь важен порядок значений — по часовой стрелке, начиная сверху.

Сокращённая запись экономит место, но именно она чаще всего сбивает новичков. Разберём все варианты в таблице.

Правило запоминается так: одно значение — на все стороны; два — «вертикаль и горизонталь»; четыре — по часовой стрелке от верха. Для padding порядок точно такой же.

В чём мерить: px, em и rem

Начинающим проще всего задавать отступы в пикселях (px) — это фиксированная величина, 20px всегда 20 точек. Позже вы встретите em (относительно размера шрифта самого элемента) и rem (относительно размера шрифта корневого элемента страницы). Для первых шагов достаточно px: относительные единицы — отдельная тема, здесь их не разворачиваем.

Схлопывание вертикальных margin

Вот эффект, который ломает картину мира почти у каждого новичка. Вы ставите двум соседним абзацам по 20 пикселей нижнего и верхнего margin, ждёте между ними 40 пикселей, а получаете 20. Кажется, что браузер «съел» половину. На самом деле это штатное поведение и называется оно схлопыванием отступов¹.

Когда вертикальные внешние отступы двух соседних блоков встречаются, браузер не складывает их, а берёт больший из двух. Было 20 и 30 — станет 30, а не 50. Проверьте:

<style>
  .a { margin-bottom: 20px; background: #fde68a; }
  .b { margin-top: 30px;    background: #a7f3d0; }
</style>

<p class="a">Первый абзац</p>
<p class="b">Второй абзац</p>

В инструментах разработчика вы увидите между абзацами 30 пикселей, а не 50. Важно: схлопываются только вертикальные margin (верх и низ). Горизонтальные (лево и право) складываются как обычно. И padding не схлопывается никогда — если хотите гарантированный интервал, иногда проще задать его через padding родителя.

Почему это удобно, а не баг

Схлопывание придумано, чтобы текстовые блоки выглядели ровно. Если бы отступы складывались, между абзацем и заголовком под ним было бы двойное расстояние, и страница «дышала» бы неравномерно. Поведение описано в спецификации CSS и работает одинаково во всех современных браузерах.

Одинаковые интервалы между блоками

Классическая задача: расставить одинаковые вертикальные промежутки между карточками или пунктами меню. Первый порыв — задать каждому элементу margin: 15px 0;. Работает, но у первого элемента появляется лишний отступ сверху, а у последнего — снизу, и внешний вид «плывёт».

Надёжнее задать отступ только с одной стороны — например снизу — а у последнего элемента его убрать:

<style>
  .card { margin-bottom: 15px; }
  .card:last-child { margin-bottom: 0; } /* у последнего убираем */
</style>

Если элементы лежат в контейнере с display: flex или display: grid, есть современный и более чистый способ — свойство gap. Оно задаёт промежуток между дочерними элементами и не добавляет лишнего по краям контейнера:

<style>
  .list {
    display: flex;
    flex-direction: column;
    gap: 15px;   /* ровно 15px между элементами, по краям ничего лишнего */
  }
</style>

<div class="list">
  <div class="card">Первая</div>
  <div class="card">Вторая</div>
  <div class="card">Третья</div>
</div>

Свойство gap для flex-контейнеров поддерживается во всех актуальных версиях Chrome, Firefox, Safari и Edge; для grid оно работало ещё раньше. Если верстаете под очень старые браузеры — проверьте поддержку на caniuse, но в 2024 году это уже безопасный выбор.

Если не получилось

Три ситуации, в которые упираются чаще всего.

• Задали margin блоку, а он не сдвинулся вправо/влево. Скорее всего, это строчный элемент вроде span — у него вертикальные margin игнорируются. Дайте ему display: inline-block или display: block.
• padding увеличил ширину блока, и вёрстка «поехала». По умолчанию padding прибавляется к ширине. Добавьте в CSS * { box-sizing: border-box; } — тогда padding будет входить внутрь заданной ширины, а не расширять блок.
• Между блоками промежуток больше или меньше ожидаемого. Откройте F12, наведите на блок, посмотрите оранжевую (margin) и зелёную (padding) зоны. Часто виноват браузерный отступ по умолчанию — например, у <body> и <p> он есть изначально. Обнулите его: body { margin: 0; }.

Что делать дальше

Когда margin и padding перестанут вас удивлять, следующий шаг — разобраться с box-sizing целиком: почему border-box стал негласным стандартом и как он меняет расчёт ширины. После этого имеет смысл перейти к flexbox и grid — там gap раскроется полностью, а ручные отступы между элементами почти не понадобятся. И держите привычку: любое непонятное пустое место на странице сначала смотрите через F12, а не подбирайте цифры вслепую.

¹ Схлопывание отступов (margin collapsing) — поведение CSS, при котором соседние вертикальные внешние отступы объединяются в один, равный большему из них, вместо того чтобы складываться.