path: root/files/ru/web/css/margin/index.html

---
title: margin
slug: Web/CSS/margin
tags:
  - CSS
  - CSS Property
  - Reference
  - справочник
translation_of: Web/CSS/margin
translation_of_original: Web/CSS/margin-new
---
<div>{{CSSRef}}</div>

<p>Свойство <strong><code>margin</code></strong> <a href="/ru/CSS" title="CSS">CSS</a> определяет <a href="/ru/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">внешний отступ</a> на всех четырех сторонах элемента. Это сокращение, которое устанавливает все отдельные поля одновременно: {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} и {{cssxref("margin-left")}}.</p>

<pre class="brush:css no-line-numbers">/* Применяется ко всем четырём сторонам */
margin: 1em;

/* по вертикали | по горизонтали */
margin: 5% auto;

/* сверху | горизонтально | снизу */
margin: 1em auto 2em;

/* сверху | справа | снизу | слева */
margin: 2px 1em 0 auto;

/* Глобальные значения */
margin: inherit;
margin: initial;
margin: unset;
</pre>

<div class="hidden" id="margin">
<pre class="brush: html">&lt;div class="grid"&gt;
  &lt;div class="col"&gt;
    &lt;div class="cell"&gt;
      &lt;div class="m m0"&gt;margin: 0&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="cell"&gt;
      &lt;div class="m m1"&gt;margin: 1em&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="cell"&gt;
      &lt;div class="m m2"&gt;margin: 5% auto&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="cell"&gt;
      &lt;div class="m m3"&gt;margin: 1em auto 2em&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="cell"&gt;
      &lt;div class="m m4"&gt;margin: 5px 1em 0 auto&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="note"&gt;Все вышеприведенные блоки имеют одинаковую ширину 50%&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>

<pre class="brush: css">html,body {
  height: 100%;
  box-sizing: border-box;
}

.grid {
  width: 100%;
  height: 100%;
  display: flex;
  background: #EEE;
  font: 1em monospace;
}

.col {
  display: flex;
  flex: 1 auto;
  flex-direction: column;
}

.cell {
  box-sizing: border-box;
  margin: .5em;
  padding: 0;
  background-color: #FFF;
  overflow: hidden;
  text-align: center;
}

.note {
  background: #fff3d4;
  padding: 1em;
  margin: .5em;
  font: .8em sans-serif;
  text-align: center;
  flex: none;
}

.m {
  display: block;
  width: 50%;
  text-align: left;
  background: #E4F0F5;
  padding: .5em;
  border: 1px solid;
}

.m0 { margin: 0; }
.m1 { margin: 1em; }
.m2 { margin: 5% auto; }
.m3 { margin: 1em auto 2em; }
.m4 { margin: 5px 1em 0 auto; }</pre>
</div>

<p>{{EmbedLiveSample("margin", "100%", 400, "", "", "example-outcome-frame")}}</p>

<p>{{cssinfo}}</p>

<h2 id="Синтаксис">Синтаксис</h2>

<p>Свойство <code>margin</code> может быть задано с использованием одного, двух, трех или четырех значений. Каждое значение имеет тип <code><a href="#&lt;length>">&lt;length&gt;</a></code>, <code><a href="#&lt;percentage>">&lt;percentage&gt;</a></code> или является ключевым словом <code><a href="#auto">auto</a></code>. Каждое значение может быть положительным, отрицательным или равным нулю.</p>

<ul>
 <li>Когда определено <strong>одно</strong> значение, такое значение определено для <strong>всех четырех сторон</strong>.</li>
 <li>Когда определены <strong>два</strong> значения, то первое значение определяет внешний отступ для <strong>верхней и нижней</strong> стороны, а второе значение определяет отступ для <strong>левой и правой стороны</strong>.</li>
 <li>Когда определены <strong>три</strong> значение, то первое значение определяет внешний отступ для <strong>верхней</strong> стороны, второе значение определяет внешний отступ для <strong>левой и правой стороны</strong>, а третье значение определяет отступ для <strong>нижней</strong> стороны.</li>
 <li>Когда определены <strong>четыре</strong> значения, они определяют внешние отступы для <strong>верхней</strong> стороны, <strong>справа</strong>, <strong>снизу</strong> и <strong>слева</strong> в рассмотренном порядке (по часовой стрелке).</li>
</ul>

<h3 id="Значения">Значения</h3>

<dl>
 <dt><strong>{{cssxref("length")}}</strong></dt>
 <dd>Размер отступа как фиксированное значение.</dd>
 <dt>{{cssxref("percentage")}}</dt>
 <dd>Размер отступа в процентах относительно ширины родительского блока.</dd>
 <dt><code>auto</code></dt>
 <dd>Браузер выбирает подходящее значение для использования. Например, в некоторых случаях это значение может быть использовано для центрирования элемента.</dd>
</dl>

<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>

{{csssyntax}}

<h2 id="Примеры">Примеры</h2>

<h3 id="Простой_пример">Простой пример</h3>

<h4 id="HTML">HTML</h4>

<pre class="brush: html">&lt;div class="center"&gt;Этот элемент отцентрирован.&lt;/div&gt;

&lt;div class="outside"&gt;Этот элемент расположен за пределами своего контейнера.&lt;/div&gt;</pre>

<h4 id="CSS">CSS</h4>

<pre class="brush: css; highlight:[2,8]">.center {
  margin: auto;
  background: lime;
  width: 66%;
}

.outside {
  margin: 3rem 0 0 -3rem;
  background: cyan;
  width: 66%;
}</pre>

<p>{{ EmbedLiveSample('Simple_example','100%',120) }}</p>

<h3 id="Больше_примеров">Больше примеров</h3>

<pre class="brush: css">margin: 5%;                 /* все стороны:  отступ 5% */

margin: 10px;               /* все стороны:  отступ 10px */

margin: 1.6em 20px;         /* верх и низ:   отступ 1.6em */
                            /* право и лево: отступ 20px */

margin: 10px 3% 1em;        /* верх:         отступ 10px */
                            /* право и лево: отступ 3% */
                            /* низ:          отступ 1em */

margin: 10px 3px 30px 5px;  /* верх:   отступ 10px */
                            /* право:  отступ 3px */
                            /* низ:    отступ 30px */
                            /* лево:   отступ 5px */

margin: 2em auto;           /* верх и низ: отступ 2em */
                            /* блок отцентрирован горизонтально */

margin: auto;               /* верх и низ: отступ 0 */
                            /* блок отцентрирован горизонтально */
</pre>

<h2 id="Примечание">Примечание</h2>

<h3 id="Горизонтальное_выравнивание">Горизонтальное выравнивание</h3>

<p>Чтобы центрировать что-то горизонтально в современных браузерах, вы можете использовать <code><a href="/ru/docs/Web/CSS/display">display</a>: flex; <a href="/ru/docs/Web/CSS/justify-content">justify-content</a>: center;</code> .</p>

<p>Однако в старых браузерах, таких как IE8-9, которые не поддерживают технологию Flexible Box, они недоступны. Чтобы центрировать элемент внутри своего родителя, используйте <code>margin: 0 auto;</code> .</p>

<h3 id="Схлопывание_отступов">Схлопывание отступов</h3>

<p>Иногда внешние отступы (margins) для верхней и нижней сторон схлопываются в один отступ, который равен наибольшему из двух отступов. Смотри <a href="/ru/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">Схлопывание внешних отступов</a> для получения большей информации.</p>

<h2 id="Спецификации">Спецификации</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Спецификация</th>
   <th scope="col">Статус</th>
   <th scope="col">Комментарий</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('CSS3 Box', '#margin', 'margin') }}</td>
   <td>{{ Spec2('CSS3 Box') }}</td>
   <td>Нет значительных изменений.</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'margin') }}</td>
   <td>{{ Spec2('CSS3 Transitions') }}</td>
   <td><code>margin</code> определён как анимируемый.</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS2.1', 'box.html#margin-properties', 'margin') }}</td>
   <td>{{ Spec2('CSS2.1') }}</td>
   <td>Устраняет его влияние на строковые (inline) элементы..</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS1', '#margin', 'margin') }}</td>
   <td>{{ Spec2('CSS1') }}</td>
   <td>Первоначальное определение.</td>
  </tr>
 </tbody>
</table>

<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>

<div class="hidden">Для создания таблицы совместимости из структурированных данных воспользуйтесь ресурсом <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте данные и отправьте нам соответствующий запрос.</div>

<p>{{Compat("css.properties.margin")}}</p>

<h2 id="Смотрите_также">Смотрите также</h2>

<ul>
 <li><a class="internal" href="/ru/docs/Web/CSS/box_model" title="en/CSS/box model">CSS Box Model</a></li>
 <li><a class="internal" href="/ru/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing" title="en/CSS/margin collapsing">Схлопывание отступов</a></li>
</ul>