Свойство 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 | Значение элемента наследуется от родительского элемента. |
Поддержка браузера
1.0+ | 1.0+ | 1.0+ | 3.5+ |
Практикуйте свои знания
Что является истинным для CSS свойства margin-top?
Правильный!
Неправильно!