margin-left

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

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

/* <length> values */
margin-left: 10px; /* An absolute length */
margin-left: 1em; /* relative to the text size */
margin-left: 5%; /* relative to the nearest block container's width */

/* Keyword values */
margin-left: auto;

/* Global values */
margin-left: inherit;
margin-left: initial;
margin-left: revert;
margin-left: revert-layer;
margin-left: unset;

Свойство margin-left задаётся ключевым словом auto, или <length>, или <percentage>. Его значение может быть положительным, нулевым или отрицательным.

<length>

Размер отступа как фиксированное значение.

<percentage>

Размер отступа как процент, относительно размера по ходу текста (ширина в горизонтальной ориентации, определяемой writing-mode) содержащего блока.

auto

Левый отступ получает долю незанятого горизонтального пространства, определяемого главным образом используемым режимом макета. Если значения margin-left и margin-right оба равны auto, вычисленное пространство распределяется равномерно. В этой таблице обобщаются различные случаи:

Значение display	Значение float	Значение 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-* элементы не имеют отступов, используйте border-spacing вместо этого
любое, кроме flex, inline-flex, или table-*	любое	fixed или absolute	0, за исключением случая, когда и margin-left и margin-right установлены в auto. В этом случае он устанавливается в значение, центрирующее область границы внутри доступного width, если она фиксирована.	Режим макета абсолютного позиционирования
flex, inline-flex	любое	любое	0, за исключением случая, если есть какое-либо положительное горизонтальное свободное пространство. В этом случае оно равномерно распределяется по всем горизонтальным auto отступам.	Режим макета Flexbox

margin-left = 
  <length-percentage>  |
  auto                 |
  <anchor-size()>      

<length-percentage> = 
  <length>      |
  <percentage>  

<anchor-size()> = 
  anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )  

<anchor-name> = 
  <dashed-ident>  

<anchor-size> = 
  width        |
  height       |
  block        |
  inline       |
  self-block   |
  self-inline  

Значения в процентах для margin-left относительны к размеру контейнера по ходу текста.

HTML

<p>
  A large rose-tree stood near the entrance of the garden: the roses growing on
  it were white, but there were three gardeners at it, busily painting them red.
</p>
<p class="example">
  Alice thought this a very curious thing, and she went nearer to watch them,
  and just as she came up to them she heard one of them say, "Look out now,
  Five! Don't go splashing paint over me like that!"
</p>
<p>
  "I couldn't help it," said Five, in a sulky tone; "Seven jogged my elbow."
</p>

CSS

.example {
  margin-left: 50%;
}

Результат

• margin-top, margin-right, и margin-bottom
• margin сокращённая форма
• margin-block-start, margin-block-end, margin-inline-start, и margin-inline-end
• margin-block и margin-inline сокращённые формы
• CSS модель бокса модуль