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

Свойство CSS  margin-left устанавливает внешний отступ слева от элемента. Положительное значение увеличивает расстояние между соседними элементами, тогда как отрицательное - сокращает.

Вертикальные внешные отступы двух соседних блоков могут схлопнуться. This is called margin collapsing.

In the rare cases where width is overconstrained (i.e., when all of width, margin-left, border, padding, the content area, and margin-right are defined), margin-left is ignored, and will have the same calculated value as if the auto value was specified.

Syntax

/* <длина> значения */
margin-left: 10px;  /* абсолютная длина */
margin-left: 1em;   /* относильно размера текста */
margin-left: 5%;    /* относительно ширины родительского блока */

/* Значения-ключевые слова */
margin-left: auto;

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

Свойство margin-left может быть выражено как ключевое слово auto, или как <число>, или как <процент>. Значение может быть положительным, нулевым или отрицательным.

Values

<length>
Размер отступа - фиксированная величина.
<percentage>
Размер отступа в процентах - размер относительно длины родительского блока.
auto
The left margin receives a share of the unused horizontal space, as determined mainly by the layout mode that is used. If the values of margin-left and margin-right are both auto, the calculated space is evenly distributed. This table summarizes the different cases:
Значение display Значение float Значение position Computed value of auto Comment
inline, inline-block, inline-table любое static or relative 0 Inline layout mode
block, inline, inline-block, block, table, inline-table, list-item, table-caption любое static or relative 0, except if both margin-left and margin-right are set to auto. In this case, it is set to the value centering the element inside its parent. Block layout mode
block, inline, inline-block, block, table, inline-table, list-item, table-caption left или right static or relative 0 Block layout mode (floating element)
любое table-*, кроме table-caption любое любое 0 Internal table-* elements don't have margins, use border-spacing instead
любое, кроме flex, inline-flex, или table-* любое fixed или absolute 0, except if both margin-left and margin-right are set to auto. In this case, it is set to the value centering the border area inside the available width, if fixed. Absolutely positioned layout mode
flex, inline-flex любое любое 0, except if there is any positive horizontal free space. In this case, it is evenly distributed to all horizontal auto margins. Flexbox layout mode

Formal syntax

<length> | <percentage> | auto

Examples

.content { margin-left: 5%; }
.sidebox { margin-left: 10px; }
.logo    { margin-left: -5px; }

Specifications

Specification Status Comment
CSS Basic Box Model
Определение 'margin-left' в этой спецификации.
Рабочий черновик No significant change from CSS 2.1.
CSS Transitions
Определение 'margin-left' в этой спецификации.
Рабочий черновик Defines margin-left as animatable.
CSS Flexible Box Layout Module
Определение 'margin-left' в этой спецификации.
Кандидат в рекомендации Defines the behavior of margin-left on flex items.
CSS Level 2 (Revision 1)
Определение 'margin-left' в этой спецификации.
Рекомендация Like in CSS1, but removes its effect on inline elements.
CSS Level 1
Определение 'margin-left' в этой спецификации.
Рекомендация Initial definition.

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

Browser compatibility

ВозможностьChromeEdgeFirefoxInternet ExplorerOperaSafari
Базовая поддержка112133.51
auto1 ?1613.51
ВозможностьAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Базовая поддержка1 ? Да461 ?
auto ? ? ?4 ? ? ?

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

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

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