Свойство CSS margin — синтаксис, значения и примеры

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

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

Для чего margin является сокращением

Свойство margin является сокращением, которое устанавливает все четыре индивидуальных свойства сторон одним объявлением:

Принцип записи от одного до четырёх значений

Поскольку margin является сокращением, количество указанных значений определяет, к каким сторонам они применяются. Значения всегда идут по часовой стрелке, начиная сверху (верх → правая → низ → левая):

Четыре значения — margin: 25px 10px 15px 20px; устанавливает: сверху 25px, справа 10px, снизу 15px, слева 20px.
Три значения — margin: 15px 10px 20px; устанавливает: сверху 15px, справа и слева 10px, снизу 20px.
Два значения — margin: 15px 10px; устанавливает: сверху и снизу 15px, справа и слева 10px.
Одно значение — margin: 15px; применяет 15px ко всем четырём сторонам.

Удобный мнемонический приём для формы с четырьмя значениями — слово TRouBLe (Top, Right, Bottom, Left).

Информация

Отрицательные значения допустимы.

Информация

Отступы сверху и снизу не оказывают влияния на строчные элементы, такие как <span> или <code>.

Начальное значение	0
Применяется к	Всем элементам.
Наследуется	Нет.
Анимируемое	Да. Margin является анимируемым.
Версия	CSS1
DOM Syntax	Object.style.margin = "20px 10px";

Синтаксис

Синтаксис свойства CSS margin

margin: length | auto | initial | inherit;

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

Пример свойства CSS margin с четырьмя значениями

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        background-color: #1c87c9;
        color: #fff;
        margin: 25px 10px 15px 20px;
      }
    </style>
  </head>
  <body>
    <h2>Margin property example</h2>
    <p>Paragraph with background-color, color and margin properties.</p>
  </body>
</html>

Попробуйте сами »

Результат

Пример свойства margin, где отступ элемента задан в 10% для всех сторон:

Пример свойства CSS margin со значением % (процент)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p.example {
        margin: 10%;
      }
    </style>
  </head>
  <body>
    <h2>Margin property example</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <p class="example">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  </body>
</html>

Попробуйте сами »

Пример свойства margin, определённого в единицах «em»:

Пример свойства CSS margin со значением em

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p.example {
        margin: 4em;
      }
    </style>
  </head>
  <body>
    <h2>Margin property example</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <p class="example">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  </body>
</html>

Попробуйте сами »

Рассмотрим следующий пример, который демонстрирует разницу между свойствами margin, padding и border:

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

Пример свойства CSS margin с одним значением (px)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        background-color: #eee;
        width: 200px;
        border: 20px solid #8ebf42;
        padding: 30px;
        margin: 55px;
      }
    </style>
  </head>
  <body>
    <h2>Margin property example</h2>
    <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
  </body>
</html>

Попробуйте сами »

Центрирование блока с помощью `margin: auto`

Установка левого и правого отступов в auto — это классический способ горизонтально центрировать блочный элемент с явно заданной шириной. Браузер делит оставшееся горизонтальное пространство поровну между двумя сторонами:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box {
        width: 300px;
        margin: 0 auto;
        background-color: #1c87c9;
        color: #fff;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <div class="box">I am centered horizontally.</div>
  </body>
</html>

margin: 0 auto; означает нулевые отступы сверху и снизу и auto слева и справа. Обратите внимание, что auto центрирует только по горизонтали — вертикальное центрирование оно не обеспечивает. Для вертикального центрирования используйте Flexbox или Grid.

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

Отступы принимают отрицательные значения, которые притягивают элемент к соседнему (или выводят его за пределы контейнера), а не отталкивают от него. Это полезно для перекрытия элементов или смещения элемента за пределы внутреннего отступа родителя:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .second {
        margin-top: -20px;
        background-color: #8ebf42;
        color: #fff;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <p>First paragraph.</p>
    <p class="second">This paragraph is pulled up to overlap the one above.</p>
  </body>
</html>

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

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

Информация

Схлопывание отступов влияет только на вертикальные (верхние/нижние) отступы блочных элементов в нормальном потоке. Левые и правые отступы никогда не схлопываются, а отступы элементов Flex или Grid тоже не схлопываются.

Значения

Значение	Описание	Пример
auto	Устанавливает отступ. Это значение по умолчанию для данного свойства.	Play it »
length	Определяет отступ в px, pt, cm и т.д. Значение по умолчанию — 0.	Play it »
%	Задаёт отступ в % от содержащего элемента.	Play it »
initial	Устанавливает свойство в его значение по умолчанию.	Play it »
inherit	Наследует свойство от родительского элемента.

Практика

Какие из следующих утверждений о CSS Margins верны?

Margins используются для создания пространства вокруг элементов, за пределами любых заданных границ.У Margins нет свойств.С помощью CSS вы имеете полный контроль над отступами.Существуют свойства для установки отступа для каждой стороны элемента (верх, правая, низ и левая).Margins всегда прозрачны.Можно использовать отрицательные значения для создания эффектов перекрытия.Свойство margin-clear позволяет задать отступ элемента.

Для чего margin является сокращением

Принцип записи от одного до четырёх значений

Синтаксис

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

Результат

Пример свойства margin, где отступ элемента задан в 10% для всех сторон:

Пример свойства margin, определённого в единицах «em»:

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

Центрирование блока с помощью margin: auto

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

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

Значения

Практика

Центрирование блока с помощью `margin: auto`