W3docs
ru
Войти

CSS Margin

Используйте свойство CSS margin для создания пространства вокруг элемента за пределами его рамки. Задать отступы можно сверху, снизу, слева и справа.

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

В этой главе рассматриваются четыре отдельных свойства для каждой стороны, сокращённое свойство margin (от одного до четырёх значений), специальные значения auto и inherit, порядок вычисления процентных отступов, отрицательные отступы, а также правило схлопывания отступов, которое удивляет почти каждого при первом столкновении с ним.

Отдельные стороны

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

Уже очевидно, что для верхней стороны используется margin-top, для нижней — margin-bottom, для левой — margin-left, а для правой — margin-right.

Все свойства margin принимают следующие значения:

  • auto — отступ вычисляется браузером (используется для горизонтального центрирования блочных элементов),
  • length — задаёт отступ в единицах px, pt, cm, rem, em и т. д.,
  • % — задаёт отступ в процентах от ширины содержащего элемента,
  • inherit — указывает, что отступ должен быть унаследован от родительского элемента.

Важная тонкость: процентные отступы всегда вычисляются относительно ширины содержащего блока, даже для margin-top и margin-bottom. Таким образом, margin-top: 10% внутри контейнера шириной 600px равняется 60px, а не 10% высоты.

Margin также может принимать отрицательные значения, которые притягивают элемент ближе к соседям (или накладывают его на них). Подробнее см. раздел Отрицательные отступы ниже.

Margin как сокращённое свойство

Свойство CSS margin является сокращённым свойством для следующих отдельных свойств:

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

CSS с разными отступами

p {
  margin-top: 25px;
  margin-right: 10px;
  margin-bottom: 15px;
  margin-left: 20px;
}

Если все стороны имеют одинаковые значения, например все стороны равны 50px, в CSS это можно записать так.

CSS с одинаковым отступом, код

p {
  margin: 50px;
}

Когда верхняя и нижняя стороны имеют одинаковое значение (например, 15px), а левая и правая стороны имеют одинаковое значение (например, 10px), можно использовать следующий код.

CSS margin с 2 числами, код

p {
  margin: 15px 10px;
}

Это эквивалентно:

CSS margin с 2 числами, полная запись, код

p {
  margin-top: 15px;
  margin-right: 10px;
  margin-bottom: 15px;
  margin-left: 10px;
}

Когда левая и правая стороны одинаковы (например, 15px), верхняя сторона равна 5px, а нижняя — 10px, можно записать:

CSS margin с 3 числами, код

p {
  margin: 5px 15px 10px;
}

Это эквивалентно:

CSS margin с 3 числами, полная запись, код

p {
  margin-top: 5px;
  margin-right: 15px;
  margin-bottom: 10px;
  margin-left: 15px;
}

Пример свойства margin:

Код свойства CSS margin

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        background-color: #1c87c9;
        color: white;
        margin: 25px 10px 15px 20px;
      }
    </style>
  </head>
  <body>
    <p>Paragraph with background-color, color and margin properties.</p>
  </body>
</html>
Попробуйте сами »

Результат

Свойство CSS Margin

Значение auto свойства margin

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

Пример свойства margin со значением "auto":

Пример использования значения "auto" свойства margin:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 300px;
        margin: auto;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <h2>The auto value</h2>
    <p>
      Setting the “auto” value of the margin property you can horizontally center the element inside its container. As a result, the element will take up the defined width and the space that remains, will be divided between the right and left margins.
    </p>
    <div>
      The auto value horizontally centered this div.
    </div>
  </body>
</html>
Попробуйте сами »

Значение inherit свойства margin

В приведённом ниже примере левый отступ элемента <p> наследуется от его родительского элемента (<div>):

Пример свойства margin со значением "inherit":

Пример использования значения "inherit" свойства margin

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        background-color: lightblue;
        margin-left: 100px;
      }
      p.inherit {
        margin-left: inherit;
        padding: 10px 0;
      }
    </style>
  </head>
  <body>
    <h2>The inherit value</h2>
    <p>
      Here the left margin is inherited from its parent element:
    </p>
    <div>
      <p class="inherit">
        With the help of the "inherit" value, the left margin is inherited from the div element.
      </p>
    </div>
  </body>
</html>
Попробуйте сами »

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

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

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .top    { margin-bottom: 30px; background: #1c87c9; color: #fff; }
      .bottom { margin-top: 20px;    background: #2eae44; color: #fff; }
    </style>
  </head>
  <body>
    <p class="top">My bottom margin is 30px.</p>
    <p class="bottom">My top margin is 20px. The gap between us is 30px, not 50px.</p>
  </body>
</html>

Несколько правил, которые стоит запомнить:

  • Схлопываются только верхний и нижний отступы. Левый и правый (горизонтальные) отступы никогда не схлопываются — они всегда суммируются.
  • Родительский элемент и его первый/последний дочерний элемент могут схлопываться вместе, если их ничего не разделяет (рамка, padding, overflow со значением, отличным от visible, или flex/grid-контейнер).
  • Пустые элементы схлопывают свои собственные верхний и нижний отступы в один.

Если вам нужен гарантированный отступ, предпочтительнее использовать padding, рамку или раскладку flex/grid с gap — отступы внутри flex- и grid-контейнеров не схлопываются.

Отрицательные отступы

Отрицательный отступ притягивает элемент в направлении отступа, нередко перекрывая соседний элемент. Отрицательный margin-top или margin-left сдвигает сам элемент; отрицательный margin-right или margin-bottom притягивает следующий контент ближе.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box {
        background-color: #1c87c9;
        color: #fff;
        padding: 10px;
      }
      .pulled {
        margin-top: -15px;
      }
    </style>
  </head>
  <body>
    <div class="box">First box</div>
    <div class="box pulled">This box is pulled 15px up to overlap the first one.</div>
  </body>
</html>

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

Логические свойства margin

Современный CSS также предлагает логические свойства, которые следуют направлению письма текста, а не физическим сторонам экрана — это полезно для сайтов, поддерживающих как письмо слева направо, так и справа налево:

  • margin-inline-start / margin-inline-end — начало/конец строчной (текстовой) оси,
  • margin-block-start / margin-block-end — начало/конец блочной оси,
  • Сокращённые свойства margin-inline и margin-block (например, margin-inline: auto для горизонтального центрирования как в LTR, так и в RTL).

На стандартной странице с направлением письма слева направо margin-inline-start ведёт себя как margin-left, а margin-block-start — как margin-top, однако они автоматически переключаются для контента с направлением справа налево.

Связанные главы

Практика

Практика
Какие свойства можно задать с помощью CSS Margin?
Какие свойства можно задать с помощью CSS Margin?
Was this page helpful?