Свойство CSS margin-left
Свойство margin-left задаёт ширину левого поля.
Когда сумма width, margin-left, border, padding, области контента и margin-right превышает ширину контейнера, поля становятся auto.
Свойство margin-left определяется ключевым словом <auto>, <percentage> или <length>. Его значение может быть отрицательным, положительным или нулевым.
INFO
Допускаются отрицательные значения.
| Начальное значение | 0 |
|---|---|
| Применяется к | Ко всем элементам. Также применяется к ::first-letter. |
| Наследуется | Нет. |
| Анимация | Да. Левое поле элемента анимируется. |
| Версия | CSS2 |
| Синтаксис DOM | object.style.marginLeft = "20px"; |
Синтаксис
Синтаксис свойства CSS margin-left
css
margin-left: auto | <length> | <percentage> | initial | inherit;Пример свойства margin-left, заданного в "px":
Пример использования свойства CSS margin-left со значением px
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.left {
margin-left: 25px;
}
</style>
</head>
<body>
<h2>Margin-left property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="left">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Результат
Пример свойства margin-left, заданного в "em":
Пример использования свойства CSS margin-left со значением em
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.left {
margin-left: 8em;
}
</style>
</head>
<body>
<h2>Margin-left property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="left">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Пример свойства margin-left, заданного в "px", "em" и "%":
Пример использования свойства CSS margin-left со значениями em, px и %
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p.p1 {
margin-left: 6em;
}
p.p2 {
margin-left: 40px;
}
p.p3 {
margin-left: 10%;
}
</style>
</head>
<body>
<h2>Margin-left property example</h2>
<p>No specified margin.</p>
<p class="p1"> Left margin is set to 6em.</p>
<p class="p2">Left margin is set to 40px.</p>
<p class="p3">Left margin is set to 10%.</p>
<p>No specified margin</p>
</body>
</html>Значения
| Значение | Описание | Запустить |
|---|---|---|
| auto | Задает левое поле. Это значение по умолчанию для данного свойства. | Запустить » |
| length | Определяет левое поле в px, pt, см и т.д. Значение по умолчанию — 0. | Запустить » |
| % | Задает левое поле в % от содержащего элемента. | Запустить » |
| initial | Заставляет свойство использовать значение по умолчанию. | Запустить » |
| inherit | Наследует свойство от родительского элемента. |
Практика
Что задаёт свойство 'margin-left' в CSS?