Блочная модель

Зачем это нужно

Любой элемент на странице — прямоугольник, даже если выглядит круглым. Карточка товара, кнопка, абзац — всё это коробки. Чтобы управлять, сколько места они занимают и как далеко стоят друг от друга, нужно понимать блочную модель (box model). Это основа любой вёрстки: без неё не сделать ни красивую кнопку, ни ровную сетку.

Из чего состоит коробка

Изнутри наружу:

1. content — содержимое (текст, картинка); его размер — width и height;
2. padding — внутренний отступ, «поля» между содержимым и рамкой; фон заходит и сюда;
3. border — рамка;
4. margin — внешний отступ, расстояние до соседей; он всегда прозрачный.

Аналогия: картина в раме. Холст — content, паспарту — padding, багет — border, расстояние до соседней картины на стене — margin.

Размеры

.box {
  width: 300px;
  height: 100px;
  background: lightblue;
}

Результат: голубой прямоугольник 300×100 пикселей.

Обычно height не задают — пусть высота подстраивается под текст, иначе длинный текст вылезет из блока. Вместо неё бывают min-height и max-width: «не меньше» и «не больше».

padding, border, margin

.button {
  padding: 10px 20px;
  border: 2px solid navy;
  margin: 15px;
  background: skyblue;
}

Результат: голубая кнопка с тёмно-синей рамкой; текст отодвинут от рамки на 10px сверху/снизу и 20px по бокам; вокруг кнопки 15px пустого места.

Сокращённая запись — по часовой стрелке, начиная сверху:

Запись	Значит
padding: 10px;	все четыре стороны 10px
padding: 10px 20px;	верх/низ 10px, лево/право 20px
padding: 5px 10px 15px;	верх 5, лево/право 10, низ 15
padding: 1px 2px 3px 4px;	верх, право, низ, лево

То же самое работает для margin. Можно задать одну сторону: padding-left: 8px;, margin-top: 0;.

Рамка записывается тремя словами: толщина, стиль, цвет. Стили: solid (сплошная), dashed (пунктир), dotted (точки), double (двойная).

Скругление углов — border-radius:

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: orange;
}

Результат: оранжевый круг — квадрат со скруглением 50% превращается в круг.

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

Блок с заданной шириной можно поставить по центру, если отдать всё свободное место поровну слева и справа:

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

Результат: колонка шириной 600px ровно посередине страницы. auto значит «раздели свободное место».

box-sizing

Подвох: по умолчанию width — это ширина только содержимого. Padding и рамка прибавляются сверху:

.a { width: 200px; padding: 20px; border: 5px solid; }

Результат: на экране блок шириной 200 + 20·2 + 5·2 = 250px.

Это неудобно, поэтому почти все сайты включают другой режим:

* {
  box-sizing: border-box;
}

Теперь width — ширина вместе с padding и рамкой. Блок .a станет ровно 200px, а под содержимое останется 150px. Селектор * значит «все элементы».

Схлопывание отступов

Вертикальные margin двух соседних блоков не складываются, а «схлопываются» — берётся больший:

.first { margin-bottom: 30px; }
.second { margin-top: 20px; }

Результат: между блоками 30px, а не 50px. С горизонтальными отступами такого не бывает.

Как это работает внутри

Открой инструменты разработчика (F12), выбери элемент — во вкладке «Computed» будет схема из вложенных прямоугольников: оранжевый margin, жёлтая рамка, зелёный padding, синий content, с числами на каждой стороне. Это лучший способ понять, откуда взялось лишнее место.

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

1. Блок «вылез» за край. width: 100% плюс padding — больше 100%. Лечится box-sizing: border-box.
2. margin: auto не центрирует. У блока нет width — он и так на всю ширину, центрировать нечего.
3. Фиксированная height и длинный текст. Текст вылезает за блок. Убери height или используй min-height.
4. Путают padding и margin. Фон блока «растёт» с padding, но не с margin. Нужно больше места внутри кнопки — padding; дальше от соседей — margin.
5. Рамка без стиля. border: 2px red; — рамки не будет, нужен стиль: border: 2px solid red;.

Шпаргалка

Свойство	Что делает
width, height	размеры содержимого
min-height, max-width	«не меньше», «не больше»
padding: 10px 20px	внутренний отступ (верх/низ, лево/право)
border: 1px solid #ccc	рамка: толщина, стиль, цвет
border-radius: 8px / 50%	скругление / круг
margin: 0 auto	внешний отступ / центрирование блока
box-sizing: border-box	ширина вместе с padding и рамкой
* { … }	правило для всех элементов