Що таке «collapsing margins»?

Collapsing margins, це ефект схлопування вертикальних margin у блоків, коли замість підсумовування береться найбільше значення, і підсумковий відступ стає спільним.

Відбувається лише з вертикальними відступами (margin-top і margin-bottom) і лише в block-level елементів.

---

#Коли margins схлопуються

1. Між двома сусідніми блоковими елементами

2. Між батьківським елементом і першим/останнім дочірнім елементом (якщо в батьківського елемента немає border, padding або overflow)
3. У порожнього блока (якщо в ньому немає контенту, padding і border)

---

#Як рахується підсумок

Якщо є два відступи:

Підсумок буде 30px, а не 50px.

---

#Коли margins НЕ схлопуються

• якщо є border
• якщо є padding
• якщо задано overflow: hidden | auto | scroll
• якщо елемент, flex або grid

---

#Суть в одному реченні

Collapsing margins, це механізм, за якого вертикальні margin двох блоків об'єднуються в один, що дорівнює максимальному.