Как предотвратить margin collapse

Margin collapse происходит, когда вертикальные отступы соседних элементов схлопываются, образуя один общий отступ.

Как предотвратить:

1. Добавить padding или border к родительскому элементу.
   css

   Копировать

   .parent { padding: 1px; }

2. Использовать overflow (не visible).
   css

   Копировать

   .parent { overflow: auto; }

3. Применить display: flex или grid к родителю.
   css

   Копировать

   .parent { display: flex; }

4. Использовать gap вместо margin в Flex/Grid.
   css

   Копировать

   .parent { display: flex; gap: 20px; }

5. Добавить ::before/::after с content.
   css

   Копировать

   .parent::before { content: ''; display: table; }

Эти методы нарушают поток, предотвращая схлопывание.