margin
======

CSS свойство **`margin`** определяет внешний отступ на всех четырёх сторонах элемента. Это сокращение, которое устанавливает все отдельные поля одновременно: `margin-top`, `margin-right`, `margin-bottom` и `margin-left`.

Интерактивный пример
--------------------

Составные свойства
------------------

Данное свойство является сокращением для следующих CSS свойств:

* `margin-top`
* `margin-right`
* `margin-bottom`
* `margin-left`
Синтаксис
---------


```css
/\* Применяется ко всем четырём сторонам \*/
margin: 1em;
margin: -3px;

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

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

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

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


Свойство `margin` может быть задано с использованием одного, двух, трёх или четырёх значений. Каждое значение имеет тип `<length>`, `<percentage>` или является ключевым словом `auto`. Каждое значение может быть положительным, отрицательным или равным нулю.

* Когда определено **одно** значение, такое значение определено для **всех четырёх сторон**.
* Когда определены **два** значения, то первое значение определяет внешний отступ для **верхней и нижней** стороны, а второе значение определяет отступ для **левой и правой стороны**.
* Когда определены **три** значение, то первое значение определяет внешний отступ для **верхней** стороны, второе значение определяет внешний отступ для **левой и правой стороны**, а третье значение определяет отступ для **нижней** стороны.
* Когда определены **четыре** значения, они определяют внешние отступы для **верхней** стороны, **справа**, **снизу** и **слева** в рассмотренном порядке (по часовой стрелке).
### Значения

**`<length>`**

Размер отступа как фиксированное значение.

`<percentage>`

Размер отступа в процентах относительно ширины родительского блока.

`auto`

Браузер выбирает подходящее значение для использования. Например, в некоторых случаях это значение может быть использовано для центрирования элемента.

Формальное определение
----------------------

|  |  |
| --- | --- |
| Начальное значение | как и у каждого из подсвойств этого свойства:* `margin-bottom`: `0`
* `margin-left`: `0`
* `margin-right`: `0`
* `margin-top`: `0`
 |
| Применяется к | все элементы, кроме элементов с табличным типом `display`, отличным от `table-caption`, `table` и `inline-table`. Это также применяется к `::first-letter`. |
| Наследуется | нет |
| Проценты | ссылается на ширину содержащего блока |
| Обработка значения | как и у каждого из подсвойств этого свойства:* `margin-bottom`: процент, как указан, или абсолютная длина
* `margin-left`: процент, как указан, или абсолютная длина
* `margin-right`: процент, как указан, или абсолютная длина
* `margin-top`: процент, как указан, или абсолютная длина
 |
| Animation type | длина |

Формальный синтаксис
--------------------
```

margin =   
  <'margin-top'>{1,4} (en-US)    
  
```

Примеры
-------

### Простой пример

#### HTML


```html
<div class="center">Этот элемент отцентрирован.</div>

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


#### CSS


```css
.center {
  margin: auto;
  background: lime;
  width: 66%;
}

.outside {
  margin: 3rem 0 0 -3rem;
  background: cyan;
  width: 66%;
}
```

### Больше примеров


```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 \*/
/\* блок отцентрирован горизонтально \*/
```

Примечание
----------

### Горизонтальное выравнивание

Чтобы центрировать что-то горизонтально в современных браузерах, вы можете использовать `display: flex; justify-content: center;` .

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

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

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

Спецификации
------------

| Specification |
| --- |
| CSS Box Model Module Level 3 # margin |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* Введение в базовую блочную модель CSS
* Схлопывание отступов
* `margin-top`, `margin-right`, `margin-bottom` и `margin-left`
* Логические свойства: `margin-block-start` (en-US), `margin-block-end` (en-US), `margin-inline-start` и `margin-inline-end`. А так же сокращенные варианты: `margin-block` (en-US) и `margin-inline` (en-US)