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

💡 Объяснение

Всё на странице — коробки

Это, пожалуй, самая важная идея CSS: каждый элемент — это прямоугольная коробка. Заголовок, абзац, картинка, ссылка, даже вся страница. Если понять, как устроена коробка, можно сверстать что угодно.

Включи в CSS временно правило * { outline: 1px solid red; } — и увидишь, что страница состоит из прямоугольников (* — селектор «все элементы»).

Четыре слоя коробки

Представь посылку с подарком. У неё четыре слоя, изнутри наружу:

1. content (содержимое) — сам подарок: текст или картинка. Его размер задают width (ширина) и height (высота).
2. padding (внутренний отступ) — пузырчатая плёнка вокруг подарка. Расстояние от содержимого до рамки. Фон элемента заполняет и padding.
3. border (рамка) — стенки коробки.
4. margin (внешний отступ) — расстояние между этой коробкой и соседними. Он всегда прозрачный.

Посмотреть слои любого элемента можно в F12: выбери элемент, и на вкладке «Computed» (или «Стили») появится цветная схема коробки.

Размеры: width и height

• width: 300px; — фиксированная ширина.
• width: 50%; — половина ширины родителя.
• max-width: 600px; — «не шире чем»: на большом экране 600px, на маленьком — меньше. Очень полезно для адаптивности.
• height лучше обычно не задавать: пусть высота зависит от содержимого, иначе текст может «вылезти» из коробки.

Отступы: четыре стороны

padding и margin можно задавать для каждой стороны: padding-top, padding-right, padding-bottom, padding-left. Но удобнее сокращённая запись:

• padding: 20px; — все четыре стороны по 20px;
• padding: 10px 20px; — сверху и снизу 10, слева и справа 20;
• padding: 5px 10px 15px 20px; — сверху, справа, снизу, слева — по часовой стрелке, начиная с 12 часов.

margin: 0 auto; — хитрость для центрирования: сверху и снизу 0, а слева и справа браузер делит свободное место поровну. Работает, если у блока задана ширина.

Рамка: border

border: 3px solid #ff9f43;

Три значения: толщина, стиль и цвет. Стили: solid (сплошная), dashed (пунктир), dotted (точки), double (двойная). Можно задать рамку только с одной стороны: border-left: 6px solid red;.

Фон: background

background-color — цвет фона. Фон закрашивает content и padding, но не margin. Сокращённо можно писать background: white;.

box-sizing: border-box

По умолчанию width — это ширина только содержимого. Если задать width: 300px, padding: 20px и border: 5px, коробка на экране будет шириной 300 + 20·2 + 5·2 = 350px. Это неудобно считать.

Правило box-sizing: border-box; меняет подсчёт: width включает padding и рамку, и коробка будет ровно 300px. Поэтому почти все разработчики пишут в начале CSS:

* {
  box-sizing: border-box;
}

Блочные и строчные элементы

• Блочные (div, p, h1, section) занимают всю ширину и начинаются с новой строки. У них работают width, height и все отступы.
• Строчные (a, strong, span, em) живут внутри строки текста. Width и height у них не работают, а вертикальные margin не раздвигают строки.

Поменять поведение можно свойством display: display: block; или display: inline-block; (стоит в строке, но слушается размеров).

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

Если у верхнего блока margin-bottom: 30px, а у нижнего margin-top: 20px, расстояние между ними будет не 50px, а 30px — берётся больший из отступов. Это нормальное поведение CSS для вертикальных отступов.

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

• Путают padding и margin: хотели «воздух внутри», а раздвинули соседей.
• Задают height, и текст вылезает за коробку.
• margin: auto не центрирует, потому что не задана ширина.
• Картинка шире карточки — нужно img { max-width: 100%; }.

Проверь себя

1. Назови 4 слоя коробки изнутри наружу.
2. Что означает margin: 10px 20px?
3. Какой ширины будет блок с width 200px, padding 10px и border 2px без border-box? А с border-box?