Свойство CSS margin-bottom
Свойство CSS margin-bottom задаёт нижний отступ элемента. Узнайте синтаксис, значения и схлопывание отступов.
Свойство CSS margin-bottom задаёт пространство ниже элемента — между его нижним краем и следующим элементом в потоке. Отступ прозрачен: он отодвигает соседнее содержимое, но не имеет собственного фона или рамки. На этой странице рассматриваются синтаксис, допустимые единицы, важное правило схлопывания отступов и связь margin-bottom с другими свойствами отступов.
Используйте margin-bottom, когда нужно добавить вертикальный воздух после элемента — например, для расстояния между стоящими друг за другом абзацами, отделения заголовка от текста ниже или создания зазора под карточкой.
Отрицательные значения допустимы (например, margin-bottom: -10px;) — они сдвигают следующий элемент вверх, позволяя ему перекрывать текущий.
margin-bottom не оказывает эффекта на незамещённые строчные элементы, такие как <span> или <a>. Чтобы применить вертикальные отступы к ним, сначала установите display: inline-block или display: block.
margin-bottom — одна из четырёх сторон, управляемых сокращённым свойством margin; его вертикальный партнёр — margin-top.
| Начальное значение | 0 |
|---|---|
| Применяется к | Всем элементам. Также применяется к ::first-letter. |
| Наследуется | Нет. |
| Анимируется | Да. Нижний отступ элемента поддаётся анимации. |
| Версия | CSS2 |
| DOM Синтаксис | object.style.marginBottom = "70px"; |
Синтаксис
Синтаксис свойства CSS margin-bottom
margin-bottom: length | percentage | auto | initial | inherit;Значение можно задать несколькими способами:
- length — фиксированный размер в единицах
px,em,rem,pt,cmи др.emрассчитывается относительно размера шрифта самого элемента,rem— относительно корневого размера шрифта. - percentage — доля ширины содержащего блока (не его высоты), поэтому нижний отступ в
%масштабируется вместе с шириной родителя. - auto — браузер вычисляет значение; для
margin-bottomэто почти всегда равно0. - initial / inherit — сброс до значения по умолчанию (
0) или копирование значения от родителя.
Пример свойства margin-bottom:
Пример свойства CSS margin-bottom со значением px
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.bottom {
margin-bottom: 100px;
}
</style>
</head>
<body>
<h2>Margin-bottom property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="bottom">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-bottom со значением "4em":
Пример свойства CSS margin-bottom со значением em
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.bottom {
margin-bottom: 4em;
}
</style>
</head>
<body>
<h2>Margin-bottom property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="bottom">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-bottom с единицами "px", "em" и "%":
Пример свойства CSS margin-bottom со значениями px, em и %
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p.p1 {
margin-bottom: 5em;
}
p.p2 {
margin-bottom: 20%;
}
p.p3 {
margin-bottom: 20px;
}
</style>
</head>
<body>
<h2>Margin-bottom property example</h2>
<p>A paragraph with no margins specified.</p>
<p class="p1">Bottom margin is set to 5em.</p>
<p class="p2">Bottom margin is set to 20%.</p>
<p class="p3">Bottom margin is set to 20px.</p>
<p>A paragraph with no margins specified.</p>
</body>
</html>Схлопывание отступов
Распространённый сюрприз: когда margin-bottom одного блока встречается с margin-top следующего, они не складываются. Вместо этого они схлопываются в один отступ, равный наибольшему из двух. Схлопывание применяется только к вертикальным (верхним и нижним) отступам блочных элементов — горизонтальные отступы никогда не схлопываются.
Схлопывание отступов
p.one {
margin: 20px 0;
}
p.two {
margin: 35px 0;
}В коде выше у <p class="one"> вертикальный отступ равен 20px, а у <p class="two"> — 35px. Можно было бы ожидать, что зазор между ними составит 20 + 35 = 55px. Однако из-за схлопывания отступов реальный зазор равен 35px — большему из двух значений.
Чтобы предотвратить схлопывание двух отступов, разделите их чем-нибудь: добавьте рамку или отступ (padding) к родителю или поместите элементы в разные контексты форматирования (например, установив display: flex или display: grid на контейнер, где отступы никогда не схлопываются).
Пример схлопывания отступов:
Пример схлопывания отступов
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p.one {
margin: 20px 0;
}
p.two {
margin: 35px 0;
}
</style>
</head>
<body>
<h2>Margin-bottom property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="one">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="two">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>Значения
| Значение | Описание | Попробовать |
|---|---|---|
| auto | Задаёт нижний отступ. Это значение по умолчанию для данного свойства. | Попробовать » |
| length | Задаёт нижний отступ в px, pt, cm и т.д. Значение по умолчанию — 0. | Попробовать » |
| % | Задаёт нижний отступ в % от содержащего элемента. | Попробовать » |
| initial | Устанавливает для свойства значение по умолчанию. | Попробовать » |
| inherit | Наследует значение свойства от родительского элемента. |
Связанные свойства
margin-top— вертикальный аналог, задающий пространство над элементом (и схлопывающийся сmargin-bottom).margin— сокращение, задающее все четыре стороны одновременно.padding-bottom— пространство внутри нижнего края элемента, в пределах его рамки.box-sizing— управляет тем, как измеряются ширина и высота; полезный контекст при рассуждении о блочной модели.