margin-left
===========

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

Интерактивный пример
--------------------

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

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

Синтаксис
---------


```css
/\* Ключевые слова \*/
margin-left: auto;

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

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


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

### Значения

`<length>`

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

`<percentage>`

Размер отступа в процентах - размер относительно длины родительского блока.

`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` (en-US) |
| *любое, кроме `flex`,* `inline-flex`*, или* `table-*` | *любое* | *`fixed`* или `absolute` | `0`, кроме случаев, когда `margin-left` и `margin-right` установлены как `auto`. В этом случае, устанавливается значение центрирующее границы области внутри доступной `width` (ширины), если значение фиксировано. | Способ разметки абсолютным позиционированием |
| `flex`, `inline-flex` | *любое* | *любое* | `0`, кроме случаев, когда есть положительное горизонтальное свободное пространство. В этом случае, распределяется равномерно по всем горизонтальным `auto` отступам. | Способ разметки с помощью flexbox |

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

margin-left =   
  <length-percentage>  | (en-US)  
  auto                   
  
<length-percentage> =   
  <length>      | (en-US)  
  <percentage>    
  
```

Примеры
-------


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

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

| Specification |
| --- |
| CSS Box Model Module Level 3 # margin-physical |

|  |  |
| --- | --- |
| Начальное значение | `0` |
| Применяется к | все элементы, кроме элементов с табличным типом `display`, отличным от `table-caption`, `table` и `inline-table`. Это также применяется к `::first-letter`. |
| Наследуется | нет |
| Проценты | ссылается на ширину содержащего блока |
| Обработка значения | процент, как указан, или абсолютная длина |
| Animation type | длина |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.