W3docs
ru
Войти

Свойство CSS margin-left

Свойство CSS margin-left задаёт отступ с левой стороны элемента. Узнайте о значениях свойства и посмотрите примеры.

Свойство margin-left задаёт ширину левого внешнего отступа.

Если сумма значений width, margin-left, border, padding, области содержимого и margin-right превышает ширину контейнера, отступы становятся auto.

Свойство margin-left задаётся ключевым словом <auto>, значением <percentage> или <length>. Значение может быть отрицательным, положительным или равным нулю.

Информация

Допускаются отрицательные значения.

Начальное значение0
Применяется кКо всем элементам. Также применяется к ::first-letter.
НаследуетсяНет.
АнимируемоеДа. Левый отступ элемента поддаётся анимации.
ВерсияCSS2
DOM-синтаксисobject.style.marginLeft = "20px";

Синтаксис

Синтаксис свойства CSS margin-left

margin-left: auto | <length> | <percentage> | initial | inherit;

Пример свойства margin-left со значением "px":

Пример свойства CSS margin-left со значением px

<!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>
Попробуйте сами »

Результат

Свойство CSS margin-left

Пример свойства margin-left со значением "em":

Пример свойства CSS margin-left со значением em

<!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 и %

<!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, cm и т. д. Значение по умолчанию — 0.Попробовать »
%Задаёт левый отступ в % от ширины содержащего элемента.Попробовать »
initialУстанавливает значение свойства по умолчанию.Попробовать »
inheritНаследует значение свойства от родительского элемента.

Практика

Практика
Что задаёт свойство 'margin-left' в CSS?
Что задаёт свойство 'margin-left' в CSS?
Was this page helpful?