Схлопывание отступов в CSS (Margin Collapse)
Иногда верхние и нижние отступы элементов объединяются: вместо того чтобы сложиться, два отступа становятся одним, равным большему из них. Это называется схлопыванием отступов.
Примечание: Левые и правые отступы никогда не схлопываются; схлопываются только верхние и нижние.
Возьмём <h1> с нижним отступом 50px, за которым следует <h2> с верхним отступом 20px. Можно ожидать, что между ними будет 70px, но из-за схлопывания отступов остаётся 50px — большее значение.
Заголовки
Верхний отступ 20px встречается с нижним отступом 50px, и в результате промежуток равен 50px.
Prompt
HTML-страница, показывающая схлопывание отступов (margin collapse) между двумя заголовками.
Во внутреннем блоке
<style> задайте <h1> margin-bottom 50px, а <h2> — margin-top 20px. Добавьте h1, за которым следует h2. Промежуток между ними схлопывается до 50px, а не до 70px.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h1 {
margin-bottom: 50px;
}
h2 {
margin-top: 20px;
}
</style>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p>The gap between the headings collapses to 50px, the larger of the two margins.</p>
</body>
</html>
Абзацы
Если у каждого абзаца верхний и нижний отступы по 30px, то благодаря схлопыванию промежуток между ними составит 30px, а не 60px.
Prompt
HTML-страница, показывающая схлопывание отступов (margin collapse) между двумя абзацами.
Во внутреннем блоке
<style> задайте каждому <p> margin-top 30px и margin-bottom 30px. Добавьте два абзаца. Промежуток между ними схлопывается до 30px, а не до 60px.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
margin-top: 30px;
margin-bottom: 30px;
}
</style>
</head>
<body>
<p>First paragraph.</p>
<p>Second paragraph. The gap between the two paragraphs collapses to 30px, not 60px.</p>
</body>
</html>
Все свойства CSS margin
Свойства margin вкратце:
margin— одно объявление для всех отступов.margin-bottom— нижний отступ.margin-left— левый отступ.margin-right— правый отступ.margin-top— верхний отступ.