CSS свойство margin-top

Свойство margin-top используется для установления верхнего поля элемента.

Отрицательные значения допустимы.
Свойство не имеет эффекта на строчных элементах, подобно <span>.
Значение по умолчанию 0
Применяется Ко всем элементам, а также к ::first-letter.
Наследуется Нет
Анимируемое Да. Верхнее поле элемента анимируемо.
Версия CSS2
DOM синтаксис object.style.marginTop = "50px";

Синтаксис

margin-top: length | auto | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .margin-top { 
      margin-top: 100px;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства margin-top</h2>
    <p>Поле не установлено.</p>
    <p class="margin-top"> Значение поля сверху текста равно 100px.</p>
  </body>
</html>

В следующем примере margin-top указано в единице измерения "em":

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      p.example {
      margin-top: 5em;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства margin-top</h2>
    <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.</p>
    <p class="example">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.</p>
    <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.</p>
  </body>
</html>

Значения

Значение Описание
auto Устанавливает верхнее поле. Значение по умолчанию.
length Устанавливает верхнее поле в единицах измерения (px, pt, cm и т. д.). Значение по умолчанию - 0.
% Устанавливает верхнее поле элемента в процентах.
initial Устанавливает свойство в значение по умолчанию.
inherit Значение элемента наследуется от родительского элемента.

Поддержка браузера

chrome firefox safari opera
1.0+ 1.0+ 1.0+ 3.5+

Практикуйте свои знания

Что является истинным для CSS свойства margin-top?
Считаете ли это полезным?