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

После этого урока вы сможете управлять пространством вокруг и внутри элементов — задавать внутренние поля, рамки и внешние отступы осознанно, а не наугад.

Что уже умеем / что добавим

Вы умеете делить страницу на блоки-контейнеры. Теперь научимся управлять пространством внутри и вокруг этих блоков. В сквозном проекте мы добавим секциям лендинга внутренние поля и отступы между ними, чтобы страница задышала.

Что вы узнаете в рамках статьи

• Из каких слоёв состоит блочная модель.
• Что такое padding и как задавать внутренние поля.
• Что такое border и как рисовать рамку.
• Что такое margin и как задавать внешние отступы.
• Чем внутренний отступ отличается от внешнего.

Ключевые термины

• Блочная модель — представление элемента как коробки из слоёв.
• Content — содержимое элемента (текст, картинки).
• padding — внутреннее поле между содержимым и рамкой.
• border — рамка вокруг содержимого и полей.
• margin — внешний отступ между элементом и соседями.

Что такое блочная модель

Любой элемент браузер представляет как коробку из четырёх слоёв, идущих изнутри наружу: содержимое (content), внутреннее поле (padding), рамка (border) и внешний отступ (margin). Представьте картину: сама картина — это content, паспарту вокруг неё — padding, рама — border, а расстояние до соседних картин на стене — margin.

Понимание этих слоёв объясняет почти всё в расположении элементов. Когда блок «занимает больше места, чем ожидалось» или «не отходит от соседа», ответ почти всегда в одном из этих слоёв. Разберём каждый.

Внутренние поля: padding

padding — это пространство между содержимым элемента и его краем (рамкой). Оно как бы «раздвигает» содержимое изнутри:

.card {
  padding: 20px;
  background-color: #ffffff;
}

Текст внутри карточки отодвинется от краёв на 20 пикселей со всех сторон, и белый фон будет виден вокруг содержимого. Padding особенно заметен, когда у элемента есть фон или рамка. Можно задавать стороны по отдельности:
padding-top, padding-right, padding-bottom, padding-left, либо перечислить значения в одну строку.

Padding входит в фон элемента — заливка и рамка охватывают и поле, и содержимое.

Рамка: border

border рисует линию по краю элемента, между padding и margin. Её задают в формате «толщина — стиль — цвет»:

.card {
  border: 2px solid #1a3c8c;
}

Вокруг карточки появится сплошная синяя рамка толщиной 2 пикселя. Значение solid означает сплошную линию; бывают также dashed (пунктир) и dotted (точки). Рамка помогает визуально выделить блок и увидеть его настоящие границы — это полезно и при отладке вёрстки.

Внешние отступы: margin

margin — это пространство снаружи элемента, отделяющее его от соседей. Именно margin создаёт промежутки между блоками:

.features {
  margin-top: 40px;
}

Блок преимуществ отодвинется от того, что стоит над ним, на 40 пикселей. Как и padding, margin можно задавать по сторонам (margin-top, margin-bottom и т. д.) или все сразу. Отдельно полезен приём margin: 0 auto — он центрирует блок по горизонтали, но им мы займёмся при работе с шириной.

Ключевое отличие: padding — пространство внутри элемента (под его фоном), margin — снаружи (всегда прозрачное). Это частый источник путаницы у новичков.

Применяем в проекте

Добавим лендингу воздуха. Зададим секциям внутренние поля, разделим их внешним отступом и добавим тонкую рамку блоку преимуществ.

.hero {
  padding: 60px 20px;
  text-align: center;
}

.features {
  padding: 40px 20px;
  margin-top: 40px;
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
}

Запись padding: 60px 20px означает 60 пикселей сверху и снизу, 20 — слева и справа (первое значение — вертикаль, второе — горизонталь). Обновите страницу: содержимое секций больше не липнет к краям, между блоками появился отступ, а секция преимуществ обведена аккуратной светлой рамкой. Лендинг сразу стал выглядеть просторно и опрятно.

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

• Путаница padding и margin.
  Padding — внутри элемента (под фоном), margin — снаружи (прозрачный).
• Неверный порядок в border.
  Пишите толщину, стиль и цвет: 2px solid #000, стиль пропускать нельзя.
• Ожидание фона на margin.
  Внешний отступ всегда прозрачен, фон на него не распространяется.
• Отступы «наугад».
  Используйте согласованные значения (например, кратные 4 или 8), чтобы вёрстка была ровной.

Итоги

Великолепно — вы освоили сердце CSS! Блочная модель, padding, border и margin — это те инструменты, которыми верстальщик пользуется постоянно, каждый день. Теперь вы понимаете, из каких слоёв состоит элемент, и умеете управлять пространством внутри и вокруг него. Ваш лендинг получил профессиональные отступы и перестал выглядеть тесным.

Это была одна из важнейших тем курса — и вы с ней справились! В следующем уроке углубимся в отступы и рамки: разберём короткие записи и скругление углов.