Какие знаешь способы предотвратить схлопывание отступов

В CSS схлопывание отступов (margin collapsing) происходит, когда вертикальные отступы соседних элементов сливаются в один. Основные способы предотвратить это:

1. Добавление padding или border к родителю:

.parent {
  padding: 1px; /* или border: 1px solid transparent */
}

2. Использование flex или grid:

.container {
  display: flex;
  flex-direction: column;
  gap: 20px; /* современная альтернатива margin */
}

3. Применение overflow (не visible):

.parent {
  overflow: auto;
}

4. Использование псевдоэлемента:

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

5. Float или абсолютное позиционирование элементов также предотвращает схлопывание.

Лучший современный способ - использование gap в flex/grid, так как это явно задаёт отступы между элементами без неожиданного поведения.