Введение и проблематика

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

Почему это важно?

• Правильное использование отступов делает интерфейс читаемым и эстетичным
• Ошибки в отступах приводят к "поехавшей" вёрстке
• Понимание Box Model необходимо для предсказуемого поведения элементов

Базовая теория

CSS Box Model

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

┌─────────────────────────────────────────┐
│                 MARGIN                  │  ← Внешний отступ
│  ┌───────────────────────────────────┐  │
│  │              BORDER               │  │  ← Граница
│  │  ┌─────────────────────────────┐  │  │
│  │  │           PADDING           │  │  │  ← Внутренний отступ
│  │  │  ┌───────────────────────┐  │  │  │
│  │  │  │        CONTENT        │  │  │  │  ← Содержимое
│  │  │  └───────────────────────┘  │  │  │
│  │  └─────────────────────────────┘  │  │
│  └───────────────────────────────────┘  │
└─────────────────────────────────────────┘

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

Margin создаёт пустое пространство снаружи элемента, отталкивая соседние элементы.

/* Отступ со всех сторон */
.element {
  margin: 20px;
}
 
/* Отступы по отдельности */
.element {
  margin-top: 10px;
  margin-right: 15px;
  margin-bottom: 10px;
  margin-left: 15px;
}
 
/* Сокращённая запись: верх, право, низ, лево */
.element {
  margin: 10px 15px 10px 15px;
}
 
/* Сокращённая запись: верх/низ, лево/право */
.element {
  margin: 10px 15px;
}

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

Padding создаёт пространство внутри элемента между границей и содержимым.

/* Отступ со всех сторон */
.element {
  padding: 20px;
}
 
/* Отступы по отдельности */
.element {
  padding-top: 10px;
  padding-right: 15px;
  padding-bottom: 10px;
  padding-left: 15px;
}
 
/* Сокращённая запись аналогична margin */
.element {
  padding: 10px 15px;
}

Практические примеры

Визуальная разница

<style>
  .box-margin {
    background: #3498db;
    margin: 20px;
    /* Отступ снаружи — фон НЕ распространяется */
  }
</style>
 
<div class="box-margin">Контент</div>

Центрирование блока

/* Горизонтальное центрирование блока с фиксированной шириной */
.centered-block {
  width: 300px;
  margin: 0 auto; /* auto слева и справа = центрирование */
}

Увеличение кликабельной области

/* Padding увеличивает область клика для ссылок */
.nav-link {
  display: inline-block;
  padding: 10px 20px; /* Больше область для клика */
  text-decoration: none;
}

Пограничные кейсы

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

.block1 {
  margin-bottom: 30px;
}
 
.block2 {
  margin-top: 20px;
}
 
/* Результат: между блоками будет 30px, а НЕ 50px! */

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

• Вертикальные margin соседних блочных элементов
• Margin родителя и первого/последнего ребёнка
• Margin пустого блока (top и bottom)

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

• Горизонтальные margin
• Элементы с float, position: absolute, display: flex/grid
• Элементы с overflow отличным от visible

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

/* Margin может быть отрицательным */
.overlap {
  margin-top: -20px; /* Элемент "заедет" на предыдущий */
}
 
/* Padding НЕ может быть отрицательным! */
.invalid {
  padding: -10px; /* Не работает! */
}

Влияние на размер элемента

/* Без box-sizing */
.box {
  width: 200px;
  padding: 20px;
  /* Реальная ширина: 200 + 20 + 20 = 240px */
}
 
/* С box-sizing: border-box */
.box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  /* Реальная ширина: 200px (padding включён) */
}

Рекомендуемый сброс:

*, *::before, *::after {
  box-sizing: border-box;
}

Сравнение Margin и Padding

Когда использовать?

Используйте Margin:

• Для создания пространства между элементами
• Для центрирования блоков (margin: 0 auto)
• Когда нужно "оттолкнуть" соседние элементы

Используйте Padding:

• Для создания пространства внутри элемента
• Для увеличения кликабельной области кнопок/ссылок
• Когда фон должен распространяться на область отступа

Вопросы интервьюера

Q: В чём разница между margin и padding?

Margin — внешний отступ (снаружи элемента), padding — внутренний (внутри элемента). Margin отталкивает соседние элементы, padding увеличивает область элемента.

Q: Что такое margin collapsing?

Схлопывание margin — объединение вертикальных margin соседних элементов. Результирующий отступ равен большему из двух, а не их сумме.

Q: Может ли padding быть отрицательным?

Нет, padding не может быть отрицательным. Только margin может принимать отрицательные значения.

Q: Как избежать увеличения размера элемента из-за padding?

Использовать box-sizing: border-box — тогда padding будет включён в заданную ширину/высоту.

Q: Как центрировать блок по горизонтали?

Задать блоку фиксированную ширину и margin: 0 auto.

Источники

• MDN: CSS Box Model
• MDN: margin
• MDN: padding
• CSS-Tricks: The Box Model