`margin-left` CSS-свойство

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

Попробуйте

margin-left: 1em;

margin-left: 10%;

margin-left: 10px;

margin-left: 0;

<section id="default-example">
  <div id="container">
    <div class="col"></div>
    <div class="col transition-all" id="example-element"></div>
    <div class="col"></div>
  </div>
</section>

#container {
  width: 300px;
  height: 200px;
  display: flex;
  align-content: flex-start;
  justify-content: flex-start;
}

.col {
  width: 33.33%;
  border: solid #5b6dcd 10px;
  background-color: rgb(229 232 252 / 0.6);
  flex-shrink: 0;
}

#example-element {
  border: solid 10px #ffc129;
  background-color: rgb(255 244 219 / 0.6);
}

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

В редких случаях, когда ширина чрезмерно ограничена (то есть когда заданы все значения 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 */
margin-left: anchor-size(self-inline);
margin-left: calc(anchor-size(--my-anchor width, 20px) / 4);

/* 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>

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

• Для элементов, позиционированных относительно якоря функция anchor-size() возвращает значение <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 в процентах

Процентные значения для 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