w3docs logo

CSS свойство margin

Свойство margin добавляет пространство между элементами.

Это сокращенная форма записи для следующих свойств:

  • margin-top
  • margin-bottom
  • margin-left
  • margin-right

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

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

  • margin : 25px 10px 15px 20px. Эта запись означает, что поле сверху должно быть 25px, справа - 10px, снизу - 15px и слева - 20px.
  • margin: 15px 10px 20px. Эта запись означает, что поле сверху должно быть 15px, справа и слева - 10px, а снизу - 20px.
  • margin: 15px 10px. Эта запись означает, что поля сверху и снизу равны 15px, справа и слева - 10px.
  • Если поле имеет только одно значение, оно применяется для всех сторон.
Отрицательные значение допустимы.
Свойства margin-top и margin-bottom не имеют эффекта на строчных элементах, подобно <span> или <code>
Значение по умолчанию 0
Применяется Ко всем элементам.
Наследуется Нет
Анимируемое Да. Рамка анимируема.
Версия CSS1
DOM синтаксис Object.style.margin = "20px 10px";

Синтаксис

margin: length | auto | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      p {
      background-color: #1c87c9;
      color: #fff;
      margin: 25px 10px 15px 20px;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства margin</h2>
    <p>Параграф с применением свойств background-color, color и margin.</p>
  </body>
</html>

Пример, где задано значение равное 10% для всех сторон:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      p.example {
      margin: 10%;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства margin</h2>
    <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. </p>
    <p class="example">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. </p>
    <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. </p>
  </body>
</html>

Рассмотрим пример, где поля элемента указаны в единице измерения "em":

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      p.example {
      margin: 4em;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства margin</h2>
    <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.</p>
    <p class="example">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.</p>
    <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.</p>
  </body>
</html>

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      div {
      background-color: #eee;
      width: 200px;
      border: 20px solid #8ebf42;
      padding: 30px;
      margin: 55px;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства margin</h2>
    <div>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.</div>
  </body>
</html>

Значения

Значение Описание
auto Устанавливает поля. Значение по умолчанию.
length Устанавливает поля в единицах измерения (px, pt, cm и т. д.). Значение по умолчанию - 0.
% Устанавливает поля элемента в процентах.
initial Устанавливает свойство в значение по умолчанию.
inherit Значение элемента наследуется от родительского элемента.te.

Поддержка браузера

chrome firefox safari opera
1.0+ 1.0+ 1.0+ 3.5+

Практикуйте свои знания

Какие значения CSS свойства 'margin' способны изменить положение HTML-элементов?
Считаете ли это полезным?