margin-left
Свойство CSS margin-left
устанавливает внешний отступ слева от элемента. Положительное значение увеличивает расстояние между соседними элементами, тогда как отрицательное - сокращает.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте https://github.com/mdn/interactive-examples и отправьте нам пулл-реквест.
Вертикальные внешние отступы двух соседних блоков могут схлопнуться. Это называется схлопыванием внешних отступов.
В редких случаях, когда ширина (т.е., когда все значения width
, margin-left
, border
, padding
, область содержимого, и margin-right
определены), margin-left
игнорируется, и будет иметь такое же расчётное значение, как и auto
.
Синтаксис
/* <длина> значения */
margin-left: 10px; /* абсолютная длина */
margin-left: 1em; /* относительно размера текста */
margin-left: 5%; /* относительно ширины родительского блока */
/* Значения-ключевые слова */
margin-left: auto;
/* Глобальные значения */
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
Формальный синтаксис
<length> | <percentage> | auto
Примеры
.content { margin-left: 5%; }
.sidebox { margin-left: 10px; }
.logo { margin-left: -5px; }
Спецификации
Спецификация | Статус | Комментарий |
---|---|---|
CSS Basic Box Model Определение 'margin-left' в этой спецификации. |
Неизвестно |
|
CSS Transitions Определение 'margin-left' в этой спецификации. |
Рабочий черновик | Определяет margin-left как анимируемое. |
CSS Flexible Box Layout Module Определение 'margin-left' в этой спецификации. |
Кандидат в рекомендации |
|
CSS Level 2 (Revision 1) Определение 'margin-left' в этой спецификации. |
Рекомендация | Идентично CSS1, но удалено влияние на строчные элементы. |
CSS Level 1 Определение 'margin-left' в этой спецификации. |
Рекомендация | Первоначальное определение. |
Начальное значение | 0 |
---|---|
Применяется к | все элементы, кроме элементов с табличным типом display , отличным от table-caption , table и inline-table . Это также применяется к ::first-letter и ::first-line . |
Наследуется | нет |
Проценты | ссылается на ширину содержащего блока |
Обработка значения | процент, как указан, или аблосютная длина |
Animation type | длина |
Поддержка браузерами
BCD tables only load in the browser