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

Свойство 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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidEdge MobileFirefox для AndroidOpera для AndroidiOS SafariSamsung Internet
Базовая поддержкаChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1IE Полная поддержка 3Opera Полная поддержка 3.5Safari Полная поддержка 1WebView Android Полная поддержка 1Chrome Android ? Edge Mobile Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android Полная поддержка 6Safari iOS Полная поддержка 1Samsung Internet Android ?
autoChrome Полная поддержка 1Edge ? Firefox Полная поддержка 1IE Полная поддержка 6
Замечания
Полная поддержка 6
Замечания
Замечания The auto value is not supported in quirks mode.
Opera Полная поддержка 3.5Safari Полная поддержка 1WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Полная поддержка 4Opera Android ? Safari iOS ? Samsung Internet Android ?

Легенда

Полная поддержка  
Полная поддержка
Совместимость неизвестна  
Совместимость неизвестна
Смотрите замечания реализации.
Смотрите замечания реализации.

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

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