CSS свойство margin-left
Свойство margin-left используется для установления левого поля элемента. Могут быть редкие случаи, когда заданы свойства width, margin-left, border, padding, область content-а и margin-right. При этом свойство margin-left игнорируется и будет иметь такое же значение, как при auto.
Отрицательные значения допустимы.
| Значение по умолчанию | 0 |
| Применяется | Ко всем элементам, а также к ::first-letter. |
| Наследуется | Нет |
| Анимируемое | Да. Левое поле элемента анимируемо. |
| Версия | CSS2 |
| DOM синтаксис | object.style.marginLeft = «20px»; |
Синтаксис
margin-left: length | auto | initial | inherit;Пример
html> html> head> title>Заголовок документа title> style> .left < margin-left: 25px;> style> head> body> h2>Пример свойства margin-left h2> p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. p> p class="left">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. p> body> html>Пример, где значение левого поля элемента равно «8em»:
Пример
html> html> head> title>Заголовок документа title> style> .left < margin-left: 8em;> style> head> body> h2>Пример свойства margin-left h2> p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. p> p class="left">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. p> body> html>В следующем примере левое поле указано в «em», «px» и «%» для показа разницы между ними:
Пример
html> html> head> title>Заголовок документа title> style> p.p1 < margin-left: 6em; > p.p2 < margin-left: 40px; > p.p3 < margin-left: 10%; > style> head> body> h2>Пример свойства margin-left h2> p>Поле не указано. p> p class="p1">Значение левого поля равно 6em. p> p class="p2">Значение левого поля равно 40px. p> p class="p3">Значение левого поля равно 10%. p> p>Поле не указано p> body> html>Значения
| Значение | Описание |
|---|---|
| auto | Устанавливает левое поле. Значение по умолчанию. |
| length | Устанавливает левое поле в единицах измерения (px, pt, cm и т. д.). Значение по умолчанию — 0. |
| % | Устанавливает левое поле элемента в процентах. |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Значение элемента наследуется от родительского элемента. |
margin-left¶
Свойство margin-left устанавливает величину отступа от левого края элемента.
Отступом является расстояние от внешнего края левой границы текущего элемента до внутренней границы его родительского элемента (рис. 1).
Демо¶
Синтаксис¶
1 2 3 4 5 6 7 8 9 10 11 12
/* 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 */ /* Keyword values */ margin-left: auto; /* Global values */ margin-left: inherit; margin-left: initial; margin-left: unset; Значения¶
Величину левого отступа можно указывать в пикселях (px), процентах (%) или других допустимых для CSS единицах. Значение может быть как положительным, так и отрицательным числом.
Указывает, что размер отступов будет автоматически рассчитан браузером.
margin-left: 0; Применяется ко всем элементам
Спецификации¶
- CSS Basic Box Model
- CSS Level 2 (Revision 1)
- CSS Level 1
Описание и примеры¶
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
html> head> meta charset="utf-8" /> title>margin-lefttitle> style> .layer1 background-color: #d36037; /* Цвет фона */ > .layer2 margin-left: 20%; /* Отступ слева */ background-color: #ccc; /* Цвет фона */ padding: 10px; /* Поля вокруг текста */ > style> head> body> div class="layer1"> div class="layer2"> Коллективное бессознательное, как бы это ни казалось парадоксальным, многопланово продолжает невротический онтологический статус искусства. div> div> body> html> margin-left
CSS свойство margin-left устанавливает внешний отступ слева элемента. Отступом является расстояние от внешнего края левой границы текущего элемента до внутренней границы его родительского элемента либо до границы элемента, расположенного слева от него. Обратите внимание, для строчных элементов (display : inline; ) могут быть установлены только внешние отступы с левой и с правой стороны.
Размер внешнего левого отступа можно указывать в пикселях (px), процентах (%) или в других единицах измерения CSS. Значение может быть как положительным, так и отрицательным.
Примечание: левый или правый внешний отступ дочернего элемента никак не влияет на общую ширину родительского элемента, так как если у родительского элемента не задана фиксированная ширина, то он будет занимать всю свободную ширину.
| Значение по умолчанию: | 0 |
|---|---|
| Применяется: | ко всем элементам, за исключением элементов, которые относятся к типу display: table-*, кроме table-caption, table и inline-table. |
| Анимируется: | да |
| Наследуется: | нет |
| Версия: | CSS1 |
| Синтаксис JavaScript: | object.style.marginLeft=»10px» |
Синтаксис
margin-left: величина|auto|inherit;
Значения свойства
- При использовании значения auto, браузер сдвигает элемент полностью в правую сторону.
- Если обоим свойствам (margin-left и margin-right) установить значение auto, элемент будет центрирован по горизонтали.
- Данное значение применяется только к блочным элементам, которые имеют фиксированную ширину.
margin-left
Свойство 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 , как , или как . Значение может быть положительным, нулевым или отрицательным.
Значения
| : Внешний отступ слева получает долю неиспользованного горизонтального пространства, определяется в основном выбранным способом разметки. Если значения 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 =
| (en-US)
auto
=
| (en-US)
Примеры
.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 и ::first-line . |
| Наследуется | нет |
| Проценты | ссылается на ширину содержащего блока |
| Обработка значения | процент, как указан, или абсолютная длина |
| Animation type | длина |
Совместимость с браузерами
BCD tables only load in the browser
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 6 янв. 2024 г. by MDN contributors.
Your blueprint for a better internet.
MDN
Support
- Product help
- Report an issue
Our communities
Developers
- Web Technologies
- Learn Web Development
- MDN Plus
- Hacks Blog
- Website Privacy Notice
- Cookies
- Legal
- Community Participation Guidelines
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2024 by individual mozilla.org contributors. Content available under a Creative Commons license.