Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

The margin CSS property sets the margin area on all four sides of an element. It is a shorthand that sets all individual margins at once: margin-top, margin-right, margin-bottom, and margin-left.

/* Применяется ко всем четырём сторонам */
margin: 1em;

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

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

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

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

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

Синтаксис

The margin property may be specified using one, two, three, or four values. Each value is a <length>, a <percentage>, or the keyword auto. Each value can be positive, zero, or negative.

  • When one value is specified, it applies the same margin to all four sides.
  • When two values are specified, the first margin applies to the top and bottom, the second to the left and right.
  • When three values are specified, the first margin applies to the top, the second to the left and right, the third to the bottom.
  • When four values are specified, the margins apply to the top, right, bottom, and left in that order (clockwise).

Значения

length
Размер отступа как фиксированное значение.
percentage
Размер отступа в процентах относительно ширины родительского блока.
auto
The browser selects a suitable margin to use. For example, in certain cases this value can be used to center an element.

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

[ <length> | <percentage> | auto ]{1,4}

Примеры

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

HTML

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

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

CSS

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

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

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

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;               /* top and bottom: отступ 0 */
                            /* блок отцентрирован горизонтально */

Примечание

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

To center something horizontally in modern browsers, you can use display: flex; justify-content: center; .

However, in older browsers like IE8-9 that do not support flexbox layout, these are not available. In order to center an element inside its parent, use margin: 0 auto; .

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

Elements' top and bottom margins are sometimes collapsed into a single margin that is equal to the largest of the two margins. See Mastering margin collapsing for more information.

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

Спецификация Статус Комментарий
CSS Basic Box Model
Определение 'margin' в этой спецификации.
Рабочий черновик Нет значительных изменений.
CSS Transitions
Определение 'margin' в этой спецификации.
Рабочий черновик margin определён как анимируемый.
CSS Level 2 (Revision 1)
Определение 'margin' в этой спецификации.
Рекомендация Removes its effect on inline elements.
CSS Level 1
Определение 'margin' в этой спецификации.
Рекомендация Первоначальное определение.

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

ВозможностьChromeEdgeFirefoxInternet ExplorerOperaSafari
Базовая поддержка1 Да133.51
auto1 ?1613.51
ВозможностьAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
Базовая поддержка1 Да Да4661
auto ? ? ?4 ? ? ?

1. The auto value is not supported in quirks mode.

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

Метки документа и участники

Метки: 
 Внесли вклад в эту страницу: talgautb
 Обновлялась последний раз: talgautb,