Margin и Padding

Margin и padding — два ключевых свойства для пространства. Padding — внутренний отступ (содержимое + фон), margin — внешний (пространство между элементами). margin: 0 auto — центрирование. Отрицательные margin'ы сдвигают элементы. Margin collapse — схлопывание вертикальных отступов.

Синтаксис (одинаков для margin и padding):

1 значение: margin: 10px; (все 4 стороны) 2 значения: margin: 10px 20px; (вертикаль/горизонталь) 3 значения: margin: 10px 20px 30px; (верх/горизонталь/низ) 4 значения: margin: 10px 20px 30px 40px; (верх/право/низ/лево)

margin: auto — центрирование блока: .block { width: 300px; margin: 0 auto; } Работает для блочных элементов с заданной шириной.

margin collapse (схлопывание):

• Работает только для ВЕРТИКАЛЬНЫХ margin'ов
• Работает для смежных блочных элементов
• Не работает для padding, border, inline элементов

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

• margin-top: -20px; — элемент сдвигается ВВЕРХ
• margin-left: -10px; — элемент сдвигается ВЛЕВО
• Опасно: может нарушить вёрстку

Применение:

• padding: для пространства ВНУТРИ (карточки, кнопки)
• margin: для пространства МЕЖДУ (расстояние между секциями)
• gap: современная альтернатива margin для flex/grid

Padding — как подушка внутри коробки (содержимое не давит на стенки). Margin — как невидимый барьер между коробками (не даёт им столкнуться). Margin collapse — два магнита: когда они рядом, расстояние = max из двух, а не сумма.

**Самый простой:**

.box {
  padding: 20px;          /* Все стороны */
  margin: 10px 20px;       /* Вертикаль 10, горизонталь 20 */
  margin: 0 auto;          /* Центрирование */
}

Базовый синтаксис: все стороны, сокращение, auto.

**Простой:**

/* Карточка */
.card {
  padding: 24px;
  margin-bottom: 16px;
}

/* Первый элемент без верхнего отступа */
.card:first-child {
  margin-top: 0;
}

/* Центрирование контейнера */
.container {
  width: min(90%, 800px);
  margin-inline: auto;
  padding: 0 1rem;
}

/* Gap вместо margin для сетки */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem; /* Современная замена margin для сетки */
}

Практические паттерны: карточка, центрирование, gap.

**Реальный пример:**

/* Секции с collapsing */
.section {
  padding: clamp(3rem, 8vw, 6rem) 0;
}

/* Отрицательный margin для перекрытия */
.hero {
  position: relative;
}

.hero-content {
  margin-top: -4rem; /* Поднимает контент поверх hero */
  position: relative;
  z-index: 1;
}

/* Автоматические отступы в flex */
.nav-item + .nav-item {
  margin-left: auto; /* Последний элемент прижат вправо */
}

/* Кнопка с padding */
.btn {
  padding: 0.75em 1.5em;
  margin: 0.25em;
  border: none;
  border-radius: 6px;
  /* padding задаёт размер кнопки, margin — расстояние между ними */
}

Реальные паттерны: секции, отрицательные margin, flex-центрирование. Это пример будущих тем: position, flexbox и clamp() детально разбираются в C12, C13 и C22.

**Неправильно:** Использовать margin вместо gap для сеток

**Почему:** Margin создаёт проблемные отступы у крайних элементов. Gap — безопасная альтернатива для flex/grid.

**Правильно:** В flex/grid используйте gap. Margin — для пространства между не- flex/grid элементами.

**Неправильно:** Не понимать margin collapse

**Почему:** margin-bottom: 20px + margin-top: 30px = 30px (не 50px!). Это удивляет.

**Правильно:** Margin collapse: вертикальные смежные margin'ы схлопываются (берётся max).

**Неправильно:** Злоупотреблять отрицательными margin

**Почему:** Отрицательные margin непредсказуемы и ломают нормальный поток. Используйте position и transform.

**Правильно:** Для сдвига элементов: position: relative + transform: translateY(-20px).

• Padding: внутри (содержимое + фон элемента)
• Margin: снаружи (пространство между элементами)
• margin: 0 auto — центрирование блока с шириной
• Margin collapse — схлопывание вертикальных margin'ов
• Gap — современная альтернатива margin для flex/grid

Назад: Вы знаете блочную модель (C7) — margin и padding это два её свойства для создания отступов.

Вперёд: В следующем уроке (C9) вы изучите display и поток документа: block, inline, inline-block и обычный поток.