Отступы и промежутки: margin-collapse, padding и их поведение

1. Введение: Зачем нужны отступы? 🛠️

Без отступов веб-страница — как книга без полей: текст «прилипает» к краям, элементы сливаются в кашу. В CSS за отступы отвечают margin (внешние) и padding (внутренние). Разберёмся, как они работают и почему иногда ведут себя неожиданно.

💡 Аналог из жизни: margin — это личное пространство между людьми в очереди, а padding — расстояние от вашего тела до одежды.

2. Padding: внутренний буфер элемента 🧩

padding добавляет пространство внутри элемента, между его границей (border) и содержимым. Работает предсказуемо, но есть нюансы:

.box {
  padding: 20px;               /* Все стороны */
  padding: 10px 30px;          /* Вертикально | Горизонтально */
  padding-top: 5px;            /* Отдельная сторона */
}

Что важно?

Увеличивает размер элемента (если не задан box-sizing: border-box).
Фон (цвет/изображение) распространяется на область padding.

3. Margin: дистанция между элементами 📏

margin — это «воздух» снаружи элемента. Он не влияет на размеры самого элемента, но отодвигает соседей.

.card {
  margin: 15px;                /* Все стороны */
  margin-bottom: 40px;         /* Только снизу */
  margin-left: auto;           /* Выравнивание по горизонтали */
}

Лайфхак: margin: 0 auto центрирует блок, если у него есть явная ширина.

4. Margin Collapse: когда отступы «слипаются» 🤯

Главная странность margin: вертикальные отступы соседних элементов иногда не складываются, а выбирается наибольший.

Как это работает?

<div class="block1">Блок 1</div>
<div class="block2">Блок 2</div>

.block1 {
  margin-bottom: 50px;
}
.block2 {
  margin-top: 30px;
}

Итоговое расстояние: не 80px (50 + 30), а 50px (сработал margin-bottom первого блока).

Когда происходит схлопывание?

Только для вертикальных отступов (margin-top/margin-bottom).
Только между обычными блочными элементами (не flex, не grid).
Если нет border, padding или clear между элементами.

⚠️ Осторожно: это поведение часто ломает вёрстку. Решение — использовать padding или gap в Flex/Grid.

5. Исключения и хитрости 🎩

Границы и padding останавливают collapse

Добавьте border-top: 1px solid transparent к нижнему элементу — и margin перестанут схлопываться.

Отрицательные margin

Можно создать «наложение» элементов:

.overlap {
  margin-top: -20px;  /* Поднимется на 20px вверх */
}

Flex и Grid — свои правила

В современных моделях (flex, grid) margin collapse не работает. Используйте gap для управления расстояниями:

.container {
  display: grid;
  gap: 20px;  /* Аналог margin, но без схлопывания */
}

6. Практика: собираем пазл 🧩

Задача: создать карточку с заголовком и текстом, где:

Внутренние отступы (padding) — 20px.
Расстояние между карточками — 30px (без схлопывания!).
Текст не прилипает к заголовку.

Решение:

<div class="card">
  <h2 class="card-title">Заголовок</h2>
  <p class="card-text">Текст карточки...</p>
</div>
<div class="card">...</div>

.card {
  padding: 20px;
  margin-bottom: 30px;
  border: 1px solid #eee;  /* Предотвращает margin collapse */
}
.card-title {
  margin-top: 0;
  margin-bottom: 10px;     /* Отступ между заголовком и текстом */
}

7. Итоги: правила для чемпионов 🏆

padding — внутри элемента, margin — снаружи.
Margin collapse — только для вертикальных отступов в блочной вёрстке.
Flex/Grid — используйте gap вместо margin для предсказуемости.
Отрицательные margin — мощный инструмент, но опасен в неопытных руках.

Попробуйте применить эти знания прямо сейчас — откройте DevTools и «поиграйте» с отступами на любой странице!