--- title: margin-left slug: Web/CSS/margin-left translation_of: Web/CSS/margin-left ---
{{CSSRef()}}

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

{{EmbedInteractiveExample("pages/css/margin-left.html")}}

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

В редких случаях, когда ширина (т.е., когда все значения width, margin-left, border, padding, область содержимого, и margin-right определены), margin-left игнорируется, и будет иметь такое же расчётное значение, как и auto .

Синтаксис

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

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

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

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

Значения

{{cssxref("<length>")}}
Размер отступа - фиксированная величина.
{{cssxref("<percentage>")}}
Размер отступа в процентах - размер относительно длины родительского блока.
auto
Внешний отступ слева получает долю неиспользованного горизонтального пространства, определяется в основном выбранным способом разметки. Если значения margin-left и margin-right одновременно установлены как auto, расчётное пространство распределяется равномерно. Эта таблица кратко излагает различные:
Значение {{cssxref("display")}} Значение {{cssxref("float")}} Значение {{cssxref("position")}}

Расчётное значение auto

Комментарий
inline, inline-block, inline-table любое static или relative 0 Строчный способ разметки
block, inline, inline-block, block, table, inline-table, list-item, table-caption любое static или relative 0, кроме случаев, когда margin-left и margin-right установлены как auto. В этом случае устанавливается значение, центрирующее элемент внутри его родителя Блочный способ разметки
block, inline, inline-block, block, table, inline-table, list-item, table-caption left или right static или relative 0 Блочный способ разметки (плавающие элементы)
любое table-*, кроме table-caption любое любое 0 Внутренние table-* элементы не имеют отступов, вместо этого используйте {{ cssxref("border-spacing") }}
любое, кроме flex, inline-flex, или table-* любое fixed или absolute 0, кроме случаев, когда margin-left и margin-right установлены как auto. В этом случае, устанавливается значение центрирующее границы области внутри доступной  width (ширины), если  значение фиксировано. Способ разметки абсолютным позиционированием
flex, inline-flex любое любое 0, кроме случаев, когда есть положительное горизонтальное свободное пространство. В этом случае, распределяется равномерно по всем горизонтальным auto отступам. Способ разметки с помощью flexbox

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

{{csssyntax()}}

Примеры

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

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

Спецификация Статус Комментарий
{{SpecName('CSS3 Box', '#the-margin', 'margin-left')}} {{Spec2('CSS3Box')}}


Нет значительных изменений относительно CSS 2.1.

{{SpecName('CSS3 Transitions', '#animatable-css', 'margin-left')}} {{Spec2('CSS3 Transitions')}} Определяет margin-left как анимируемое.
{{SpecName('CSS3 Flexbox', '#item-margins', 'margin-left')}} {{Spec2('CSS3 Flexbox')}}


Определяет влияние margin-left на flex-элементы.

{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-left')}} {{Spec2('CSS2.1')}} Идентично CSS1, но удалено влияние на строчные элементы.
{{SpecName('CSS1', '#margin-left', 'margin-left')}} {{Spec2('CSS1')}} Первоначальное определение.

{{cssinfo}}

Поддержка браузерами

{{Compat("css.properties.margin-left")}}