CSS margin

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

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

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

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

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

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

Свойство margin принимает отрицательные значения.

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

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

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

CSS different margins

css

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

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

CSS the same margin, code

css

p {
  margin: 50px;
}

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

CSS margin with 2 numbers, code

css

p {
  margin: 15px 10px;
}

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

CSS margin with 2 numbers, long way, code

css

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

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

CSS margin with 3 numbers, code

css

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

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

CSS margin with 3 numbers, long way, code

css

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

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

CSS margin property code

html

<!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>

Try it Yourself »

Результат

CSS Margin Property

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

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

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

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

html

<!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>

Try it Yourself »

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

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

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

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

html

<!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>

Try it Yourself »

CSS margin ​

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

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

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

Результат ​

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

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

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

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

Практика ​

CSS margin

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

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

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

Результат

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

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

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

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

Практика