margin-left

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

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

Вертикальные внешные отступы двух соседних блоков могут схлопнуться. 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

Browser compatibility