margin

Пример

<div class="card">Первая карточка</div>
<div class="card">Вторая карточка</div>

.card {
  margin: 1rem;
  padding: 1rem;
  border: 1px solid;
}

Синтаксис

margin: <'margin-top'>{1,4};

Начальное значение

0

Применяется к

всем элементам, кроме внутренних элементов таблиц (строк, колонок, ячеек); у строчных элементов не действуют вертикальные отступы

Наследуется

нет

Анимируется

как длина

Вычисляемое значение

как у отдельных свойств margin-top, margin-right, margin-bottom, margin-left

margin — сокращённая запись для четырёх свойств: margin-top, margin-right, margin-bottom и margin-left. Число значений определяет, какой стороне какое достанется:

margin: 1rem; /* все четыре стороны */
margin: 1rem 2rem; /* сверху и снизу | справа и слева */
margin: 1rem 2rem 3rem; /* сверху | справа и слева | снизу */
margin: 1rem 2rem 3rem 4rem; /* сверху | справа | снизу | слева — по часовой стрелке */

Значения

Длина

Отступ в любых единицах: 16px, 1rem, 2em. Может быть отрицательной — тогда элемент наезжает на соседа.

Процент

Процент от ширины содержащего блока — даже для верхнего и нижнего отступа.

auto

Браузер сам вычисляет отступ. У блока с заданной шириной margin-inline: auto делит свободное место поровну — блок встаёт по центру. Во флекс- и грид-контейнерах auto забирает всё свободное место по своей оси.

Как понять

Отступ — это «личное пространство» элемента снаружи рамки. Фон элемента на него не распространяется: сквозь отступ видно родителя.

У вертикальных отступов соседних блоков в нормальном потоке есть особенность — схлопывание: отступы не складываются, а перекрываются, и остаётся больший из двух. Если у одного абзаца margin-bottom: 20px, а у следующего margin-top: 30px, между ними будет 30 пикселей, а не 50. Во флекс- и грид-контейнерах схлопывания нет.

Примеры

Центрирование блока

Блоку с ограниченной шириной достаточно автоматических отступов слева и справа:

<div class="column">Колонка шириной 20rem по центру родителя.</div>

.column {
  max-width: 20rem;
  margin: 0 auto;
  padding: 1rem;
  border: 1px solid;
}

Схлопывание отступов

Между абзацами будет 2rem, а не 3rem:

<p class="first">margin-bottom: 1rem</p>
<p class="second">margin-top: 2rem</p>

p {
  margin: 0;
  outline: 1px dashed;
}

.first {
  margin-bottom: 1rem;
}

.second {
  margin-top: 2rem;
}

Прижать элемент к краю во флексе

margin-left: auto у последнего пункта забирает всё свободное место слева и отодвигает пункт вправо:

<nav class="bar">
  <a href="#">Главная</a>
  <a href="#">Блог</a>
  <a class="bar__login" href="#">Войти</a>
</nav>

.bar {
  display: flex;
  gap: 1rem;
  padding: 0.5rem;
  border: 1px solid;
}

.bar__login {
  margin-left: auto;
}

Подсказки

• Процентный вертикальный отступ считается от ширины, а не от высоты родителя. Это часто удивляет.
• Отступ первого или последнего потомка может «выпасть» из родителя, если у родителя нет рамки, внутреннего отступа или своего контекста форматирования. Помогает display: flow-root у родителя или padding.
• Для текстов на разных языках удобнее логические свойства: margin-block (сверху и снизу) и margin-inline (по строке). Они учитывают направление письма.
• Расстояние между элементами флекса или сетки проще задавать свойством gap, чем отступами каждого элемента.