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;

Пример

<!DOCTYPE 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":

Пример

<!DOCTYPE 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" и "%" для показа разницы между ними:

Пример

<!DOCTYPE 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	Значение элемента наследуется от родительского элемента.