Исполняемые доки CSS: Margin в CSS

Что такое margin

Margin это пространство снаружи от рамки элемента. Он всегда прозрачный, и его задача отталкивать другие элементы. В примере серый контейнер просвечивает сквозь margin вокруг синего блока:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Margin</title>
  <style>
    .container {
      display: flow-root; /* keeps the child's margin inside the gray area */
      background: #e5e7eb;
    }
    .box {
      margin: 24px;
      padding: 12px;
      border: 3px solid #111827;
      background: #2563eb;
      color: white;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box">24px of margin on every side (the gray)</div>
  </div>
</body>
</html>

Серая полоса не часть блока: собственный фон блока заканчивается на его рамке. Для пространства с фоном элемента используйте padding.

Сокращенная запись margin

margin принимает от одного до четырех значений, в том же порядке по часовой стрелке, что и padding:

Объявление	Верх	Право	Низ	Лево
`margin: 10px;`	10	10	10	10
`margin: 10px 20px;`	10	20	10	20
`margin: 10px 20px 30px;`	10	20	30	20
`margin: 10px 20px 30px 40px;`	10	20	30	40

У каждой стороны есть и свое свойство (margin-top, margin-right, margin-bottom, margin-left), и логические версии, которые следуют направлению текста (margin-inline-start, margin-inline-end, margin-block, margin-inline).

В отличие от padding, margin принимает auto и отрицательные значения:

Значение	Пример	Примечание
Длина	`16px`, `1.5rem`	Самый частый вариант
Проценты	`5%`	От ширины содержащего блока, для всех четырех сторон
`auto`	`margin: 0 auto`	Браузер заполняет оставшееся пространство
Отрицательное	`margin-top: -10px`	Приближает элемент или соседа, возможно перекрытие

Центрирование через margin: 0 auto

margin: 0 auto это классический способ центрировать блок по горизонтали. auto с обеих сторон говорит браузеру поделить оставшееся пространство поровну. Нужна ширина меньше контейнера, иначе делить нечего:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>margin auto</title>
  <style>
    .page {
      max-width: 300px;
      margin: 0 auto;
      background: #2563eb;
      color: white;
      padding: 12px;
    }
    .end {
      width: 160px;
      margin-left: auto; /* all the leftover space goes on the left */
      background: #16a34a;
      color: white;
      padding: 8px;
      margin-top: 12px;
    }
  </style>
</head>
<body>
  <div class="page">Centered with margin: 0 auto</div>
  <div class="end">Pushed to the end</div>
</body>
</html>

Auto-отступы не центрируют по вертикали в обычном потоке (вертикальные auto становятся 0) и не действуют на строчные элементы. Полный обзор центрирования есть на странице как выровнять div по центру.

Схлопывание margin

Когда два вертикальных отступа соприкасаются, они не складываются. Браузер оставляет только больший. Здесь у первого блока margin-bottom: 30px, у второго margin-top: 20px, и промежуток между ними 30px, а не 50px:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Margin collapsing</title>
  <style>
    .box { background: #2563eb; color: white; padding: 10px; }
    .a { margin-bottom: 30px; }
    .b { margin-top: 20px; }
  </style>
</head>
<body>
  <div class="box a">margin-bottom: 30px</div>
  <div class="box b">margin-top: 20px</div>
  <p id="gap"></p>
  <script>
    const a = document.querySelector('.a').getBoundingClientRect();
    const b = document.querySelector('.b').getBoundingClientRect();
    document.getElementById('gap').textContent = 'Gap: ' + (b.top - a.bottom) + 'px';
  </script>
</body>
</html>

Схлопывание сделано намеренно: абзацы и заголовки могут нести свои отступы, не удваивая их на стыке. Но оно подводит во втором случае, когда верхний отступ дочернего элемента выходит за пределы родителя:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Parent collapse</title>
  <style>
    .parent { background: #e5e7eb; margin-bottom: 16px; }
    .child { margin-top: 30px; background: #f59e0b; padding: 8px; }
    .fixed { display: flow-root; }
  </style>
</head>
<body>
  <div class="parent"><div class="child">Margin escaped: no gray above me</div></div>
  <div class="parent fixed"><div class="child">flow-root: 30px of gray above me</div></div>
</body>
</html>

В первом родителе отступ дочернего элемента 30px схлопнулся через верхний край родителя, поэтому он сдвигает вниз весь родитель, а не создает серое пространство внутри. Остановить это можно любым из способов:

display: flow-root у родителя (в отличие от overflow: hidden, он ничего не обрезает).
Padding или border у верхнего края родителя.
Родитель flex или grid: отступы flex- и grid-элементов никогда не схлопываются.

Горизонтальные отступы никогда не схлопываются, как и отступы плавающих и абсолютно позиционированных элементов.

Отрицательный margin

Отрицательный margin тянет в обратную сторону. Сверху или в начале он сдвигает сам элемент; снизу или в конце подтягивает следующий элемент. Блоки могут перекрываться:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Negative margin</title>
  <style>
    .card { background: #e5e7eb; padding: 16px; width: 240px; }
    .avatar {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: #2563eb;
      border: 4px solid white;
      margin-top: -46px; /* pulled up over the banner */
    }
    .banner { height: 60px; background: #16a34a; width: 272px; }
  </style>
</head>
<body>
  <div class="banner"></div>
  <div class="card">
    <div class="avatar"></div>
    <p>The avatar overlaps the banner.</p>
  </div>
</body>
</html>

margin auto во flexbox

Внутри flex-контейнера auto-отступ забирает все свободное пространство со своей стороны. Это самый простой способ отодвинуть один элемент в дальний конец строки, и во flexbox auto работает и по вертикали:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Flex margin auto</title>
  <style>
    nav { display: flex; gap: 12px; background: #111827; padding: 10px; }
    nav a { color: white; text-decoration: none; }
    .login { margin-inline-start: auto; color: #f59e0b; }
  </style>
</head>
<body>
  <nav>
    <a href="#">Home</a>
    <a href="#">Docs</a>
    <a href="#">Blog</a>
    <a href="#" class="login">Log in</a>
  </nav>
</body>
</html>

margin-inline-start: auto ставит свободное пространство перед «Log in», в конце строки и на страницах слева направо, и справа налево.

Частые ошибки

margin: 0 auto у элемента без ширины. Блок и так заполняет контейнер; задайте width или max-width.
margin: auto у строчного элемента. Auto-отступы у span, a или строчного img равны 0. Сделайте его display: block.
Два вертикальных отступа и ожидание их суммы. Они схлопываются до большего; используйте gap во flex или grid или последовательно один направленный отступ.
Отступ дочернего элемента сдвигает родителя. Это схлопывание родителя и потомка; добавьте родителю display: flow-root.
Margin там, где нужен фон. Margin прозрачен; используйте padding.

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

Что такое margin в CSS?

Margin это пространство снаружи от рамки элемента. Оно прозрачное и отталкивает соседние элементы. Задается свойством margin или свойствами отдельных сторон margin-top, margin-right, margin-bottom и margin-left.

Что делает margin: 0 auto?

Задает верхний и нижний отступы равными 0 и делит оставшееся горизонтальное пространство поровну между левым и правым отступом, что центрирует блочный элемент по горизонтали. Элементу нужна ширина меньше контейнера, например max-width: 600px.

Почему margin auto не центрирует элемент?

Обычно потому, что у элемента нет ширины (блок заполняет контейнер, и делить нечего), или потому, что он строчный (span, a, img по умолчанию), а у строчных auto-отступы равны 0. Задайте ширину и display: block или центрируйте из родителя через flexbox или grid.

Что такое схлопывание margin?

Когда два вертикальных отступа встречаются, например нижний отступ одного абзаца и верхний следующего, браузер берет только больший из них, а не складывает их. Это происходит только с вертикальными отступами блочных элементов в обычном потоке, но не во flex и grid.

Может ли margin быть отрицательным?

Да. Отрицательный margin тянет элемент в сторону этой стороны или подтягивает на него следующий элемент, поэтому блоки могут перекрываться. Это полезно для небольших поправок выравнивания и чтобы элемент мог выйти за padding своего контейнера.

Связанные концепции