CSS стиль margin-left. Установка отступа слева с помощью margin-left
CSS стиль margin-left задает отступ от левого края элемента до внутренней границы его родителя .
В плавающих элементах, вложенных в родительские элементы, Internet Explorer 7 и ниже удваивает значение левого/правого отступа, прилегающего к стороне родителя. Проблему можно решить добавив плавающему элементу CSS свойство display: inline
.
Краткая информация по CSS-свойству margin-left
Значение по умолчанию | 0 |
Наследуется | Нет |
Применяется | Ко всем элементам |
Правила написания свойства margin-left
margin-left: <размер> | auto;
Где auto - указывает, что размер отступов будет рассчитан браузером автоматически.
Размер левого отступа можно указывать в пикселях (px), процентах (%), или других допустимых для CSS единицах. Размер может быть как положительным, так и отрицательным.
Объектная модель
Объект.style.marginLeft
Пример применения стиля margin-left
Проиллюстрируем работу margin-left на примере. Нам нужно, чтобы слева от текста, вложенного в тег <p> был отступ.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Пример CSS стиля margin-left</title>
<style>
article {
background: #d34937; /* Цвет фона */
}
article p {
margin-left: 20%; /* Отступ слева */
background: #cccccc; /* Цвет фона */
padding: 10px; /* Поля вокруг текста */
}
</style>
</head>
<body>
<article>
<p>Предположим, что нам нужно, чтобы
слева от текста был отступ. В этом нам
поможет CSS свойство margin-left.</p>
</article>
</body>
</html>
Обратите внимание, что благодаря отступу, мы можем видеть фон родительского элемента.