Margin и padding в CSS — внешние и внутренние отступы

margin — отступ снаружи элемента (расстояние до соседних элементов), padding — отступ внутри (расстояние от границы до содержимого). Это две самые частые CSS-свойства в любой вёрстке — разберём их досконально.

Блочная модель CSS — основа понимания

Каждый HTML-элемент в CSS — это прямоугольник, состоящий из четырёх слоёв. Понимание блочной модели — ключ к правильной работе с отступами.

┌─────────────────────────────────┐
│            MARGIN               │  ← снаружи, прозрачный
│  ┌───────────────────────────┐  │
│  │         BORDER            │  │  ← рамка
│  │  ┌─────────────────────┐  │  │
│  │  │      PADDING        │  │  │  ← внутри, фон виден
│  │  │  ┌───────────────┐  │  │  │
│  │  │  │   CONTENT     │  │  │  │  ← текст, изображения
│  │  │  └───────────────┘  │  │  │
│  │  └─────────────────────┘  │  │
│  └───────────────────────────┘  │
└─────────────────────────────────┘

Ключевое различие: padding — внутри рамки, цвет фона распространяется на область padding. Margin — снаружи рамки, всегда прозрачный.

Синтаксис margin — все варианты записи

/* 1 значение — все четыре стороны */
div { margin: 20px; }
/* top=20, right=20, bottom=20, left=20 */

/* 2 значения — вертикальные и горизонтальные */
div { margin: 16px 24px; }
/* top=16, right=24, bottom=16, left=24 */

/* 3 значения — top, горизонтальные, bottom */
div { margin: 10px 20px 30px; }
/* top=10, right=20, bottom=30, left=20 */

/* 4 значения — по часовой стрелке: top right bottom left */
div { margin: 10px 20px 15px 5px; }

/* Отдельные стороны */
div { margin-top: 10px; }
div { margin-right: 20px; }
div { margin-bottom: 15px; }
div { margin-left: 5px; }

/* Полезные значения */
div { margin: 0; }        /* убрать все отступы */
div { margin: 0 auto; }   /* центрирование по горизонтали */
div { margin-top: auto; } /* прижать вниз в flex-контейнере */

Синтаксис padding

Синтаксис padding полностью идентичен margin — те же 4 варианта записи.

/* 1 значение */
div { padding: 20px; }

/* 2 значения */
div { padding: 12px 24px; }
/* top=12, right=24, bottom=12, left=24 */

/* 4 значения */
div { padding: 10px 20px 15px 5px; }

/* Отдельные стороны */
div { padding-top: 10px; }
div { padding-right: 20px; }
div { padding-bottom: 15px; }
div { padding-left: 5px; }

/* Практические примеры */
.button  { padding: 10px 24px; }  /* кнопка: вертикальный/горизонтальный */
.card    { padding: 24px; }       /* карточка: все стороны */
.section { padding: 60px 0; }     /* секция: только вертикальные */

Разница margin и padding — когда что использовать

.card {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 12px;

  padding: 24px;  /* ← внутренний отступ: пространство ВНУТРИ карточки */
  margin: 16px;   /* ← внешний отступ: расстояние ДО соседних карточек */
}

/* Padding: часть карточки — фон виден на padding */
/* Margin: пространство между карточками — фон родителя */

Правило выбора:

• Нужно расстояние между элементами → margin
• Нужно расстояние внутри элемента (между рамкой и содержимым) → padding
• Фон должен закрашивать область отступа → padding (фон распространяется на padding)
• Кликабельная зона кнопки должна быть больше текста → padding (область клика)

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

Вертикальные margin-ы соседних блоков «схлопываются» — вместо суммы берётся большее из двух значений. Это частая причина неожиданного поведения.

/* Пример схлопывания */
.block-a { margin-bottom: 30px; }
.block-b { margin-top: 20px; }

/* Расстояние между ними — 30px, НЕ 50px! */
/* Берётся max(30px, 20px) = 30px */

/* Ещё пример: родитель и первый ребёнок */
.parent { margin-top: 20px; }
.child  { margin-top: 40px; }
/* Ребёнок выталкивает margin наружу — родитель получает 40px */

Когда схлопывания НЕТ (margin считается отдельно):

• Flex-контейнер или Grid-контейнер
• Абсолютное или фиксированное позиционирование
• Элементы с float
• Родитель с overflow: hidden или overflow: auto
• Горизонтальные margin-ы (схлопываются только вертикальные)

/* Как избавиться от схлопывания: */

/* 1. Flexbox — схлопывания нет */
.parent {
  display: flex;
  flex-direction: column;
  gap: 20px;  /* лучше использовать gap вместо margin в flex/grid */
}

/* 2. Padding вместо margin для первого/последнего элемента */
.parent { padding-top: 30px; }

/* 3. overflow: hidden на родителе */
.parent { overflow: hidden; }

margin: 0 auto — центрирование по горизонтали

Классический способ центрировать блок с фиксированной шириной внутри родителя — margin: 0 auto. Работает только для блочных элементов с заданной шириной.

/* Центрировать контент страницы */
.container {
  max-width: 1200px;
  margin: 0 auto;  /* auto по горизонтали = одинаковые отступы с обеих сторон */
  padding: 0 24px; /* немного отступа от краёв экрана */
}

/* Центрировать карточку */
.card {
  width: 400px;
  margin: 40px auto;  /* 40px сверху/снизу, auto по бокам */
}

/* Inline-block элемент не центрируется через margin: 0 auto */
/* Вместо этого используй text-align: center на родителе */
.parent { text-align: center; }
.child  { display: inline-block; }

Отрицательные margin — выход за границы

/* Выдвинуть элемент за пределы родителя */
.card {
  margin-top: -40px;  /* карточка "всплывает" на 40px над предыдущим блоком */
}

/* Классический паттерн: карточка поверх hero */
.hero { height: 400px; background: #1e293b; }
.card {
  margin-top: -80px;       /* выдвигается в зону hero */
  position: relative;      /* появляется поверх hero */
  z-index: 1;
  background: white;
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

/* Убрать margin у body (браузерный сброс) */
body { margin: 0; }
* { margin: 0; padding: 0; }

box-sizing: border-box — ширина с учётом padding

По умолчанию width задаёт только ширину контентной области — padding и border добавляются сверху. Это часто вызывает неожиданное поведение. box-sizing: border-box решает проблему.

/* Проблема с content-box (по умолчанию) */
.box {
  width: 200px;
  padding: 20px;
  border: 2px solid black;
}
/* Реальная ширина: 200 + 20*2 + 2*2 = 244px — больше чем ожидали! */

/* Решение: border-box */
* {
  box-sizing: border-box;
}

.box {
  width: 200px;
  padding: 20px;
  border: 2px solid black;
}
/* Реальная ширина: ровно 200px — padding и border ВНУТРИ ширины */

/* Рекомендация: всегда добавляй в CSS reset */
*, *::before, *::after {
  box-sizing: border-box;
}

Часто задаваемые вопросы

Как отцентрировать div по горизонтали в CSS?

Есть три основных способа. Первый — margin: 0 auto на блочном элементе с заданной шириной. Второй — Flexbox на родителе: display: flex; justify-content: center. Третий — Grid: display: grid; place-items: center для центрирования и по горизонтали и по вертикали одновременно.

Почему margin не работает у inline-элементов?

Inline-элементы (span, a, strong) игнорируют вертикальные margin-top и margin-bottom. Горизонтальные (margin-left, margin-right) работают. Решение: смени тип отображения на display: inline-block или display: block — тогда все margin-ы будут работать.

Margin или padding — что использовать между секциями?

Для пространства между секциями страницы лучше используй padding на самих секциях, а не margin. Причина: padding не схлопывается, фон секции распространяется до края, и фиксированные/sticky элементы корректно работают с padding. Стандартный паттерн: .section { padding: 80px 0; }