Margin и Padding

margin — внешний отступ (расстояние между элементом и соседями), padding — внутренний отступ (расстояние между границей элемента и его контентом). Вместе с border и box-sizing они формируют блочную модель CSS.

Зачем нужно

Отступы создают пространство и «воздух» в макете. Правильная работа с margin и padding — основа компоновки: от простых межабзацных расстояний до центрирования блоков и управления ритмом страницы.

Где используется

  • Расстояния между элементами
  • Внутренние отступы карточек, кнопок, секций
  • Центрирование блоков (margin: 0 auto)
  • Вертикальный ритм (spacing system)
  • Логические отступы для RTL-языков

Предпосылки

Margin — внешний отступ

Синтаксис

/* Все стороны */
.box { margin: 20px; }

/* Вертикальные | Горизонтальные */
.box { margin: 20px 40px; }

/* Top | Горизонтальные | Bottom */
.box { margin: 10px 20px 30px; }

/* Top | Right | Bottom | Left */
.box { margin: 10px 20px 30px 40px; }

/* Отдельные стороны */
.box {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-left: 40px;
}

margin: auto — центрирование

/* Горизонтальное центрирование блочного элемента */
.centered {
  width: 600px;
  margin: 0 auto; /* Верх/низ = 0, лево/право = auto */
}

/* В Flexbox — auto margin выталкивает элемент */
.flex-container { display: flex; }
.push-right { margin-left: auto; } /* Прижать к правому краю */

/* Полное центрирование в Flexbox */
.flex-container { display: flex; }
.center { margin: auto; } /* Центр по обеим осям */

Схлопывание margin (Margin Collapsing)

Вертикальные margin соседних блочных элементов объединяются (берётся наибольший):

.para1 { margin-bottom: 30px; }
.para2 { margin-top: 20px; }
/* Расстояние между ними = 30px (НЕ 50px!) */

Когда margin схлопывается:

  • Соседние блочные элементы (вертикально)
  • Родитель и первый/последний потомок (если нет border, padding, overflow)
  • Пустой элемент (margin-top + margin-bottom)

Когда НЕ схлопывается:

  • Flex/Grid-потомки
  • Float и absolute-элементы
  • Элементы с overflow != visible
  • display: inline-block
  • Горизонтальные margin
/* Предотвратить схлопывание с потомком */
.parent {
  /* Любое из: */
  overflow: hidden; /* или auto */
  display: flow-root;
  border-top: 1px solid transparent;
  padding-top: 1px;
}

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

/* Вытянуть элемент за пределы контейнера */
.full-width {
  margin-left: -20px;
  margin-right: -20px;
  padding-left: 20px;
  padding-right: 20px;
}

/* Наложение элементов */
.overlap {
  margin-top: -30px; /* Наехать на предыдущий элемент */
}

Padding — внутренний отступ

Синтаксис

/* Все стороны */
.box { padding: 20px; }

/* Вертикальные | Горизонтальные */
.box { padding: 12px 24px; }

/* Top | Right | Bottom | Left */
.box { padding: 10px 20px 30px 40px; }

/* Отдельные стороны */
.box {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 30px;
  padding-left: 40px;
}

Padding не может быть отрицательным (в отличие от margin).

Взаимодействие с box-sizing

/* content-box (по умолчанию): padding добавляется к width */
.content-box {
  box-sizing: content-box;
  width: 200px;
  padding: 20px;
  /* Итоговая ширина = 200 + 20 + 20 = 240px */
}

/* border-box: padding включён в width */
.border-box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  /* Итоговая ширина = 200px (контент = 160px) */
}

/* Best practice: глобально border-box */
*, *::before, *::after {
  box-sizing: border-box;
}

Логические свойства (Logical Properties)

Для поддержки разных направлений письма (LTR/RTL):

/* Физические → Логические */
.box {
  /* margin */
  margin-block-start: 10px;   /* = margin-top (в LTR) */
  margin-block-end: 20px;     /* = margin-bottom */
  margin-inline-start: 15px;  /* = margin-left (в LTR) */
  margin-inline-end: 25px;    /* = margin-right */

  /* Shorthand */
  margin-block: 10px 20px;    /* block-start block-end */
  margin-inline: 15px 25px;   /* inline-start inline-end */

  /* padding */
  padding-block: 12px 16px;
  padding-inline: 20px;
}
Физическое Логическое В LTR В RTL
margin-top margin-block-start Верх Верх
margin-bottom margin-block-end Низ Низ
margin-left margin-inline-start Лево Право
margin-right margin-inline-end Право Лево

Spacing System (система отступов)

:root {
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.5rem;   /* 24px */
  --space-6: 2rem;     /* 32px */
  --space-8: 3rem;     /* 48px */
  --space-10: 4rem;    /* 64px */
}

.card {
  padding: var(--space-5);
  margin-bottom: var(--space-4);
}

section {
  padding-block: var(--space-10);
}

Lobotomized Owl Selector (совиный селектор)

/* Автоматический отступ между потомками */
.stack > * + * {
  margin-top: 1em;
}

/* Или через gap в Flex */
.stack {
  display: flex;
  flex-direction: column;
  gap: 1rem; /* Лучшая альтернатива */
}

Частые ошибки

  1. Не учитывают margin collapsing — расстояние не 50px, а 30px:

    .a { margin-bottom: 30px; }
.b { margin-top: 20px; }

  2. Padding увеличивает размер без box-sizing: border-box:

    .box { width: 100%; padding: 20px; } /* Элемент шире 100%! */

  3. Margin на inline-элементе — вертикальный margin игнорируется:

    span { margin-top: 20px; } /* Не работает! */

  4. margin: 0 auto без width — центрирование не сработает на блочном элементе (занимает 100% ширины)

  5. Margin-top «протекает» из потомка в родителя — если у родителя нет padding/border/overflow

Практика

  • Центрировать блок через margin: 0 auto
  • Воспроизвести margin collapsing и устранить через display: flow-root
  • Создать spacing system из CSS-переменных
  • Использовать логические свойства margin-block, padding-inline
  • Прижать элемент через margin-left: auto в Flexbox
  • Применить отрицательный margin для full-bleed секции

Связанные темы

Ресурсы