Свойство CSS `margin` задает область поля на всех четырех сторонах элемента. Это свойство можно использовать для создания пространства вокруг контента (вне границы). Это краткое указание сразу установить все отдельные поля: `margin-top` , `margin-right` , `margin-bottom` и `margin-left` . Значения определяются по часовой стрелке.
Значения маржи устанавливаются с использованием длины или процентов или `auto` или `inherit` ключевого слова и могут принимать нулевые или отрицательные значения. Начальное, или по умолчанию, значение для всех свойств полей равно 0. В то время как вы можете использовать `inherit` ключевое слово , но оно не может быть использовано вместе со значением длины.
Это свойство может быть указано с использованием одного, двух, трех или четырех значений.
* Когда задано одно значение, он применяет одинаковый запас ко всем четырем сторонам.
* Когда указаны два значения, первое поле применяется к верхнему и нижнему, второе - к левому и правому.
* Когда указаны три значения, первое поле применяется к верхнему, второе - к левому и правому, третье - к нижней.
* Когда указаны четыре значения, поля применяются к верхнему, правому, нижнему и левому в этом порядке (по часовой стрелке).
```css
/* Apply to all four sides */
margin: 1em;
/* top and bottom | left and right */
margin: 5% 10%;
/* top | left and right | bottom */
margin: 1em 2em 2em;
/* top | right | bottom | left */
margin: 5px 1em 0 1em;
```
## Где в коробке
Свойство margin в CSS определяет самую внешнюю часть модели окна, создавая пространство вокруг содержимого элемента, вне любых заданных paddings и / или границ.
Вертикальные поля на разных элементах, которые касаются друг друга (таким образом, не имеют содержимого, отступов или границ, разделяющих их), будут разрушаться, образуя единственный запас, равный большему из смежных полей. Это не происходит по горизонтальным полям (слева и справа), только по вертикали (сверху и снизу).
## Поддержка браузера
Он эффективно поддерживается во всех браузерах (с IE6 +, Firefox 2+, Chrome 1+ и т. Д.),
### Больше информации
* [Рабочий проект W3C](https://www.w3.org/TR/css3-box/#the-margin)
