Frontend | Вопросы собесов

Что такое схлопывание границ ?

Спросят с вероятностью 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:

Такие блоки не участвуют в схлопывании отступов.



Схлопывание границ — это процесс объединения вертикальных отступов соседних блоков в один, чтобы избежать удвоения отступов. В результате итоговый отступ равен наибольшему из схлопывающихся отступов.



🔥 ТОП ВОПРОСОВ С СОБЕСОВ



🔒 База собесов | 🔒 База тестовых