Блочная модель: content, padding, border, margin

Разбираемся, из каких слоёв состоит каждый элемент страницы — это основа всей вёрстки.

Блочная модель — это представление элемента в виде вложенных прямоугольников: содержимое, внутренний отступ, рамка и внешний отступ.

Четыре слоя элемента

В CSS любой элемент — это прямоугольная коробка из четырёх слоёв, считая изнутри наружу:

Представьте картину на стене: само изображение — content, паспарту вокруг — padding, рама — border, а пустое пространство до соседних картин — margin.

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

Отодвигает содержимое от краёв элемента внутрь. Фон элемента распространяется и на padding.

.card {
  background: #eee;
  padding: 20px;
}

Текст внутри карточки отойдёт от её краёв на 20px со всех сторон — содержимое перестанет «липнуть» к границе. Можно задать стороны по отдельности:

.card {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
}

Или короче — в одну строку. padding: 10px 20px означает «10px сверху и снизу, 20px слева и справа».

border — рамка

Рамка задаётся тремя частями: толщина, стиль и цвет.

.card {
  border: 2px solid #999;
}

Вокруг элемента появится серая сплошная линия толщиной 2px. Стили линии: solid (сплошная), dashed (пунктир), dotted (точки). Скруглить углы помогает отдельное свойство border-radius:

.card {
  border-radius: 8px; /* скруглённые углы */
}

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

Отодвигает элемент от соседей. В отличие от padding, margin прозрачен — фон сюда не заходит.

.card {
  margin-bottom: 16px;
}

Между этой карточкой и следующей появится зазор 16px. Особый приём — margin: 0 auto центрирует блок по горизонтали: левый и правый отступы делятся поровну.

.container {
  width: 800px;
  margin: 0 auto;
}

padding или margin — что выбрать

Правило простое: padding — отступ внутри элемента (от рамки до содержимого), margin — расстояние между элементами. Нужно «продышать» текст внутри кнопки — это padding. Нужно раздвинуть две кнопки — это margin.

Итог

• Элемент состоит из слоёв: content → padding → border → margin.
• padding — внутренний отступ (с фоном), margin — внешний (прозрачный).
• margin: 0 auto центрирует блок заданной ширины по горизонтали.