CSS свойство margin-left
Определение и применение
CSS свойство margin-left устанавливает величину внешнего отступа от левого края элемента.
На изображении салатовым цветом обозначена зона за которую отвечает свойство margin-left:
Попробуйте значения margin-left
Светлая область снаружи оранжевого блока — margin. Сосед помогает увидеть сдвиг. Flex-контейнер исключает схлопывание вертикальных отступов.
margin-left: 0
HTML и CSS примера
HTML
<div class="stage">
<div class="demo-target">Блок</div>
<div class="neighbor">Сосед</div>
</div>
CSS
* {
box-sizing: border-box;
}
.stage {
width: 100%;
max-width: 300px;
padding: 12px;
border: 2px dashed #607589;
background: #edf2f5;
font: 16px/1.4 system-ui;
color: #172c3d;
}
.stage {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
}
.demo-target {
background: #ffe4bd;
border: 3px solid #245a85;
padding: 12px;
width: 90px;
margin-left: 0;
}
.neighbor {
padding: 12px;
background: #d9edf8;
}
CSS
* {
box-sizing: border-box;
}
.stage {
width: 100%;
max-width: 300px;
padding: 12px;
border: 2px dashed #607589;
background: #edf2f5;
font: 16px/1.4 system-ui;
color: #172c3d;
}
.stage {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
}
.demo-target {
background: #ffe4bd;
border: 3px solid #245a85;
padding: 12px;
width: 90px;
margin-left: 12px;
}
.neighbor {
padding: 12px;
background: #d9edf8;
}
CSS
* {
box-sizing: border-box;
}
.stage {
width: 100%;
max-width: 300px;
padding: 12px;
border: 2px dashed #607589;
background: #edf2f5;
font: 16px/1.4 system-ui;
color: #172c3d;
}
.stage {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
}
.demo-target {
background: #ffe4bd;
border: 3px solid #245a85;
padding: 12px;
width: 90px;
margin-left: 24px;
}
.neighbor {
padding: 12px;
background: #d9edf8;
}
Поддержка браузерами
Спецификация: CSS box
Поддерживается во всех основных браузерах с 2015 года.
| Возможность | Компьютеры | Мобильные | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
 Chrome |  Edge |  Firefox |  Opera |  Safari | Chrome Android | Firefox for Android | Opera Android |  Safari on iOS |  Samsung Browser |  WebView Android | WebView on iOS | |
margin-left | 1 | 12 | 1 | 3.5 | 1 | 18 | 4 | 10.1 | 1 | 1.0 | 4.4 | 1 |
anchor-size | 132 | 132 | 147 | 117 | 26 | 132 | 147 | 87 | 26 | 29.0 | 132 | 26 |
auto | 1 | 12 Версия 12 выпущена в 2015 г. Примечание MDN (англ.) The | 1 | 3.5 | 1 | 18 | 4 | 14 | 1 | 1.0 | 37 | 1 |
поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31
CSS синтаксис:
CSS
margin-left: <length-percentage> | auto | <anchor-size()>;
/* Глобальные значения */
margin-left: initial | inherit | unset | revert | revert-layer;| — выбор варианта.
JavaScript синтаксис:
JavaScript
element.style.marginLeft = "15px";Начальное значение свойства
0.
Значения свойства
| Значение | Описание |
|---|---|
length |
Определяет отступ в пикселях, см и др. единицах. Начальное значение. Допускаются отрицательные значения. |
% |
Определяет отступ в процентах от содержащего блока родительского элемента. Допускаются отрицательные значения. |
auto |
Браузер вычисляет отступ самостоятельно. |
anchor-size() |
Размер якорного элемента, например anchor-size(width). Требует подходящего якоря; поддержку проверяйте отдельно. |
initial
|
Устанавливает начальное значение свойства. |
inherit
|
Наследует вычисленное значение свойства у родительского элемента. |
unset |
Для ненаследуемого свойства margin-left устанавливает его
начальное значение.
|
revert |
Отменяет заданное в коде значение свойства для этого элемента: применяются пользовательские или стандартные стили браузера. Если они не задают значение, свойство наследуется или получает начальное значение по обычным правилам. Не возвращает значение из предыдущей строки CSS. |
revert-layer |
Сбрасывает значение свойства для текущего слоя каскада @layer. Применяется значение из другого слоя
по правилам каскада; если подходящего значения нет, возможен откат к стилям пользователя или браузера.
|
Спецификация
CSS Anchor Positioning — спецификация margin-left.
Наследуется
Нет.
Анимируемое
Да, по вычисленному значению: совместимые числовые значения интерполируются плавно. Переход между несовместимыми типами или ключевыми словами может быть дискретным.
Примеры, попробуйте сами
Внешний отступ слева
В A выбранный отступ равен 0, в B — 24px. Измените 24px на 8px или 40px и сравните расстояния вокруг синего блока. Используется Flexbox: вертикальные отступы здесь не схлопываются.
base.css
CSS
* {
box-sizing: border-box;
}
body {
margin: 16px;
font:
16px/1.4 system-ui,
sans-serif;
color: #172c3d;
}
.comparison {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
gap: 24px;
}
section {
min-width: 0;
}
h3 {
margin: 0 0 12px;
font-size: 16px;
}
.stage {
border: 1px dashed #8495a5;
background: #f1f4f7;
padding: 8px;
}
.sample {
background: #c5dbea;
border: 2px solid #35658a;
padding: 8px;
min-width: 0;
overflow-wrap: anywhere;
}
.neighbor {
background: #dee3e7;
padding: 8px;
min-width: 0;
overflow-wrap: anywhere;
}
index.html
HTML
<html lang="ru">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Внешний отступ слева</title>
</head>
<body>
<div class="comparison">
<section>
<h3>Вариант A</h3>
<div class="stage first">
<div class="neighbor">До</div>
<div class="sample">Блок</div>
<div class="neighbor">После</div>
</div>
</section>
<section>
<h3>Вариант B</h3>
<div class="stage second">
<div class="neighbor">До</div>
<div class="sample">Блок</div>
<div class="neighbor">После</div>
</div>
</section>
</div>
</body>
</html>
style.css
CSS
.stage {
display: flex;
flex-direction: row; /* Отступы flex-элементов не схлопываются. */
}
.first .sample {
margin-left: 0;
}
.second .sample {
margin-left: 24px;
}
Режим чтения