Свойство CSS margin-top
Свойство CSS margin-top задаёт верхний отступ элемента. Значения свойства и примеры.
Свойство margin-top задаёт размер верхнего отступа элемента — прозрачного пространства над его блоком, между верхней границей элемента и элементом выше него. Это вертикальный аналог margin-bottom и одна из четырёх сторон, управляемых сокращённым свойством margin.
На этой странице описаны значения, которые принимает margin-top, два поведения, которые чаще всего вызывают удивление — схлопывание вертикальных отступов и процентные значения, вычисляемые относительно ширины — а также приведены интерактивные примеры для каждого значения.
Это свойство не оказывает никакого эффекта на незамещаемые строчные элементы, такие как <span>. Чтобы добавить вертикальное пространство вокруг них, сначала сделайте их inline-block или block.
Схлопывание вертикальных отступов
Когда нижний отступ одного блока соприкасается с верхним отступом следующего, оба схлопываются в один отступ, равный наибольшему из двух, а не их сумме. Таким образом, абзац с margin-bottom: 30px, за которым следует абзац с margin-top: 20px, даст 30px пространства между ними, а не 50px.
Схлопывание происходит только между вертикальными отступами (верхним и нижним). Левый и правый отступы никогда не схлопываются. Этот эффект также предотвращается любым элементом между двумя отступами — границей, отступом, строчным элементом или блочным контекстом форматирования, например flex/grid-контейнером или overflow со значением, отличным от visible.
Допускаются отрицательные значения. Отрицательный margin-top перемещает элемент вверх, перекрывая или уменьшая зазор с элементом выше.
| Начальное значение | 0 |
|---|---|
| Применяется к | Всем элементам. Также применяется к ::first-letter. |
| Наследуется | Нет. |
| Анимируемое | Да. Верхний отступ элемента анимируется. |
| Версия | CSS2 |
| DOM Синтаксис | object.style.marginTop = "50px"; |
Синтаксис
Синтаксис свойства CSS margin-top
margin-top: length | auto | initial | inherit;Пример свойства margin-top:
Пример свойства CSS margin-top со значением px
<!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
<!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 вычисляется относительно ширины содержащего блока, а не его высоты. Это легко упустить из виду: margin-top: 10% внутри родителя шириной 600px даёт 60px, и это значение меняется при изменении ширины родителя, даже несмотря на то что отступ вертикальный.
<!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»:
<!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»:
<!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>Значения
| Значение | Описание | Попробуйте |
|---|---|---|
| length | Фиксированный верхний отступ в px, em, pt, cm и т. д. Может быть отрицательным. По умолчанию 0. | Попробуйте » |
| % | Верхний отступ, заданный в процентах от ширины содержащего блока. | Попробуйте » |
| auto | Браузер вычисляет значение. Для верхнего отступа это равнозначно 0 (в отличие от горизонтального auto, который может центрировать элемент). | Попробуйте » |
| initial | Сбрасывает свойство до его значения по умолчанию (0). | Попробуйте » |
| inherit | Наследует вычисленное значение от родительского элемента. |
auto полезен только для центрирования с помощью margin-left/margin-right. Для верхнего отступа он не имеет эффекта центрирования и ведёт себя как 0.
Когда использовать margin-top, а когда padding-top
Используйте margin-top, чтобы создать пространство снаружи элемента, отодвигая его от соседних элементов — и помните, что эти отступы могут схлопываться с отступом элемента выше. Используйте padding-top, когда нужно пространство внутри блока, между границей и содержимым; отступы padding никогда не схлопываются и включаются в любой видимый background.
Связанные свойства
margin— сокращённое свойство, задающее все четыре отступа сразу.margin-bottom,margin-right,margin-left— три остальные стороны.box-sizing— управляет тем, как ширина и высота соотносятся с padding и border в блочной модели.