Свойство CSS margin-top
Свойство margin-top используется для определения верхнего отступа элемента.
INFO
Это свойство не влияет на строчные элементы, такие как <span>.
Верхний и нижний отступы элемента могут схлопнуться в один, равный наибольшему из двух. Однако это происходит только в случае вертикальных отступов.
INFO
Допускаются отрицательные значения.
| Начальное значение | 0 |
|---|---|
| Применяется к | Ко всем элементам. Также применяется к ::first-letter. |
| Наследуется | Нет. |
| Анимация | Да. Верхний отступ элемента анимируется. |
| Версия | CSS2 |
| Синтаксис DOM | object.style.marginTop = "50px"; |
Синтаксис
Синтаксис свойства CSS margin-top
css
margin-top: length | auto | initial | inherit;Пример использования свойства margin-top:
Пример свойства CSS margin-top со значением в пикселях (px)
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.margin-top {
margin-top: 100px;
}
</style>
</head>
<body>
<h2>Margin-top property example</h2>
<p>No specified margin.</p>
<p class="margin-top"> 100px margin is specified top for this text.</p>
</body>
</html>Результат
Пример свойства margin-top, заданного в "em":
Пример свойства CSS margin-top со значением в em
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p.example {
margin-top: 5em;
}
</style>
</head>
<body>
<h2>Margin-top property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="example">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Пример свойства margin-top, заданного в "%":
Пример свойства margin-top, заданного в "%":
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.margin-top {
margin-top: 10%;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>Margin-top property example</h2>
<p>No specified margin.</p>
<p class="margin-top"> 10% margin is specified top for this text.</p>
</body>
</html>Пример свойства margin-top со значением "initial":
Пример свойства margin-top со значением "initial":
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.margin-top {
margin-top: initial;
background-color: lightgreen;
}
</style>
</head>
<body>
<h2>Margin-top property example</h2>
<p>No specified margin.</p>
<p class="margin-top"> Margin top is specified for this text.</p>
</body>
</html>Пример свойства margin-top со значением "inherit":
Пример свойства margin-top со значением "inherit":
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
margin-top: 50px;
}
.margin-top {
margin-top: inherit;
background-color: lime;
}
</style>
</head>
<body>
<h2>Margin-top property example</h2>
<div>
Here is some text.
<p class="margin-top"> Margin top is specified for this text.</p>
</div>
</body>
</html>Значения
| Значение | Описание | Запустить |
|---|---|---|
| auto | Устанавливает верхний отступ. Это значение по умолчанию для данного свойства. | Запустить » |
| length | Определяет верхний отступ в px, pt, cm и т. д. Значение по умолчанию — 0. | Запустить » |
| % | Устанавливает верхний отступ в % от размера содержащего элемента. | Запустить » |
| initial | Заставляет свойство использовать значение по умолчанию. | Запустить » |
| inherit | Наследует свойство от родительского элемента. |
Практика
Какова функция свойства 'margin-top' в CSS?