margin-left
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Свойство CSS margin-left
устанавливает внешний отступ слева от элемента. Положительное значение увеличивает расстояние между соседними элементами, тогда как отрицательное - сокращает.
Интерактивный пример
Вертикальные внешние отступы двух соседних блоков могут схлопнуться. Это называется схлопыванием внешних отступов.
В редких случаях, когда ширина (т.е., когда все значения width
, margin-left
, border
, padding
, область содержимого, и margin-right
определены), margin-left
игнорируется, и будет иметь такое же расчётное значение, как и auto
.
Синтаксис
/* Ключевые слова */
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
любое, кроме 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-element> || <anchor-size> ]? , <length-percentage>? )
<anchor-element> =
<dashed-ident>
<anchor-size> =
width |
height |
block |
inline |
self-block |
self-inline
Примеры
.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