Спросят с вероятностью 7%
Схлопывание границ (или схлопывание отступов, margin collapsing) — это поведение CSS, при котором вертикальные отступы (margins) соседних блоков могут быть объединены (схлопнуты) в один отступ. Это позволяет избежать удвоения вертикальных отступов между элементами и упрощает их управление.
Основные правила
1️⃣Смежные вертикальные отступы:
Когда два вертикальных отступа соседних блоков соприкасаются, они схлопываются в один. Размер схлопнутого отступа равен наибольшему из двух схлопывающихся отступов.
<div class="block1"></div>
<div class="block2"></div>
В данном случае итоговый отступ между
.block1 и .block2 будет 30px, а не 50px.2️⃣Родитель и первый/последний дочерний элемент:
Если первый или последний дочерний элемент имеет вертикальный отступ, он схлопывается с отступом родительского элемента, если между ними нет границ, внутреннего отступа или контента.
<div class="parent">
<div class="child"></div>
</div>
В этом случае итоговый отступ сверху для
.child будет 20px, так как отступ .child схлопывается с отступом родителя.3️⃣Пустые блоки:
Если блок не содержит контента, границ или внутреннего отступа, его вертикальные отступы также могут схлопываться.
Примеры
Схлопывание между соседними элементами
<div class="box1">Box 1</div>
<div class="box2">Box 2</div>
Итоговый отступ между
.box1 и .box2 будет 30px.Схлопывание границ родителя и первого/последнего дочернего элемента
<div class="container">
<div class="content">Content</div>
</div>
Итоговый верхний отступ для
.content будет 25px, так как отступы схлопываются.Исключения и предотвращение схлопывания
✅Границы или внутренние отступы:
Если между элементами добавить границу или внутренний отступ, схлопывания не произойдет.
.parent {
padding-top: 1px;
}
✅Flexbox и Grid:
Элементы, расположенные с помощью Flexbox или Grid, не схлопывают свои отступы.
✅Блоки с
overflow: hidden, position: absolute, или display: inline-block:Такие блоки не участвуют в схлопывании отступов.
Схлопывание границ — это процесс объединения вертикальных отступов соседних блоков в один, чтобы избежать удвоения отступов. В результате итоговый отступ равен наибольшему из схлопывающихся отступов.
🔥 ТОП ВОПРОСОВ С СОБЕСОВ
🔒 База собесов | 🔒 База тестовых