Схлопывание границ (или схлопывание отступов, margin collapsing) — это поведение CSS, при котором вертикальные отступы (margins) соседних блоков могут быть объединены (схлопнуты) в один отступ. Это позволяет избежать удвоения вертикальных отступов между элементами и упрощает их управление.

Основные правила

1. Смежные вертикальные отступы:
Когда два вертикальных отступа соседних блоков соприкасаются, они схлопываются в один. Размер схлопнутого отступа равен наибольшему из двух схлопывающихся отступов.

   ```html
   <div class="block1"></div>
   <div class="block2"></div>
   ```

В данном случае итоговый отступ между `.block1` и `.block2` будет 30px, а не 50px.

2. Родитель и первый/последний дочерний элемент:
Если первый или последний дочерний элемент имеет вертикальный отступ, он схлопывается с отступом родительского элемента, если между ними нет границ, внутреннего отступа или контента.

   ```html
   <div class="parent">
     <div class="child"></div>
   </div>
   ```

В этом случае итоговый отступ сверху для `.child` будет 20px, так как отступ `.child` схлопывается с отступом родителя.

3. Пустые блоки:
Если блок не содержит контента, границ или внутреннего отступа, его вертикальные отступы также могут схлопываться.

Примеры

Схлопывание между соседними элементами

```html
<div class="box1">Box 1</div>
<div class="box2">Box 2</div>
```

Итоговый отступ между `.box1` и `.box2` будет 30px.

Схлопывание границ родителя и первого/последнего дочернего элемента

```html
<div class="container">
  <div class="content">Content</div>
</div>
```

Итоговый верхний отступ для `.content` будет 25px, так как отступы схлопываются.

Исключения и предотвращение схлопывания

• Границы или внутренние отступы:

  Если между элементами добавить границу или внутренний отступ, схлопывания не произойдет.

  ```css
  .parent {
    padding-top: 1px;
  }
  ```

• Flexbox и Grid:

  Элементы, расположенные с помощью Flexbox или Grid, не схлопывают свои отступы.

• Блоки с `overflow: hidden`, `position: absolute`, или `display: inline-block`:

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

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

June 1, 2024, easyoffer