16 Модуль 4 Коробки и раскладка 15 мин урок 16 из 25

Блочная модель: из чего сделана каждая коробка

Почему элемент занимает больше места, чем ты задал, и как починить это одной строкой box-sizing.

Что ты научишься делать

Разберёшь элемент на четыре слоя: content, padding, border, margin
Поймёшь, почему 300px превращаются в 340px
Научишься чинить это одной строкой box-sizing

#Каждый элемент — коробка

Что бы ты ни написал в разметке — абзац, картинку, кнопку — браузер видит прямоугольник. И у каждого прямоугольника четыре слоя, вложенных друг в друга.

Слой	Что это	Виден?
`content`	Само содержимое: текст, картинка	Да
`padding`	Внутренний отступ между содержимым и рамкой	Красится фоном элемента
`border`	Рамка вокруг padding	Да, если задана
`margin`	Внешний отступ до соседей	Нет, всегда прозрачный

Блочная модель в разрезе

Четыре слоя коробки разлетаются по глубине, а ползунки меняют их размеры.

Слой	Что это
content	Само содержимое: текст, картинка
padding	Внутренний отступ, красится фоном элемента
border	Рамка вокруг padding
margin	Внешний отступ, всегда прозрачный

#Главная ловушка: 300 превращается в 340

Ты задал карточке width: 300px. Добавил padding: 16px и border: 4px. Открыл — карточка занимает 340 пикселей.

Так работает значение по умолчанию: width задаёт ширину только содержимого. Отступы и рамка добавляются сверху.

CSSЧто на самом деле происходит

1.card {2  width: 300px;      /* ширина содержимого */3  padding: 16px;     /* + 16 слева и 16 справа */4  border: 4px solid; /* + 4 слева и 4 справа */5}67/* Итого на странице: 300 + 32 + 8 = 340px */

Пока карточка одна, это терпимо. Но как только ты ставишь три карточки по 33 % в ряд шириной 900px — они не помещаются, потому что каждая на самом деле шире, чем 300.

#Починка одной строкой

CSSПервые строки любого проекта

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

border-box меняет смысл слова width: теперь оно означает ширину всей коробки вместе с отступами и рамкой. Задал 300 — получил 300, а содержимому осталось 300 − 32 − 8 = 260.

Это первое, что пишут в любом проекте. Считать размеры становится просто, и вёрстка перестаёт неожиданно расползаться.

Так не надо

.col {
  width: 33.33%;
  padding: 16px;
}
/* три колонки не влезают в строку */

Проценты считаются от содержимого, а отступы добавляются сверху. Сумма получается больше 100 %, и третья колонка падает вниз.

Так надо

* { box-sizing: border-box; }

.col {
  width: 33.33%;
  padding: 16px;
}
/* ровно три в строку */

Теперь 33.33 % — это ширина всей колонки вместе с отступами. Три штуки дают ровно 100 %.

#Сокращённые записи

У padding и margin одинаковая логика записи. Количество значений определяет, к каким сторонам они относятся.

Запись	Значение
`padding: 16px`	Все четыре стороны
`padding: 16px 24px`	Сверху и снизу 16, слева и справа 24
`padding: 16px 24px 8px`	Сверху 16, по бокам 24, снизу 8
`padding: 16px 24px 8px 12px`	По часовой стрелке: верх, право, низ, лево
`padding-top: 16px`	Только одна сторона

#Схлопывание вертикальных отступов

Странность, которая сбивает с толку всех: у первого абзаца margin-bottom: 20px, у второго margin-top: 30px. Между ними будет не 50 пикселей, а 30.

Соседние вертикальные отступы схлопываются: побеждает больший, а не сумма. С горизонтальными такого не происходит.

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

<div class="box">  <p class="a">У меня margin-bottom: 20px</p>  <p class="b">У меня margin-top: 40px</p></div><p class="hint">Между ними 40px, а не 60px — больший «съел» меньший.</p>

.box {  background: #f4f4f8;  padding: 1px 16px; /* 1px не даёт отступам вылезти наружу */}.a {  margin-bottom: 20px;  background: #ffe6cc;}.b {  margin-top: 40px;  background: #d9f2e6;}.hint {  font-size: 14px;  color: #666;}

В песочницу

Схлопывание отключается, если между отступами есть хоть что-то: рамка, внутренний отступ, или если родитель стал флекс- либо грид-контейнером. Именно поэтому во флекс-раскладке схлопывания нет — и почему многие просто задают отступы только в одну сторону.

#width, height и ограничители

Жёстко заданная высота — почти всегда ошибка: текста может оказаться больше, и он вылезет за пределы блока. Ширину тоже лучше ограничивать, а не фиксировать.

Свойство	Что делает	Когда брать
`width`	Жёсткая ширина	Редко: иконки, аватарки
`max-width`	Не шире, но может быть уже	Почти всегда: контейнеры, картинки, текст
`min-width`	Не уже, но может быть шире	Кнопки, ячейки таблиц
`height`	Жёсткая высота	Почти никогда
`min-height`	Не ниже, но может вырасти	Экранные блоки, карточки одинаковой высоты

CSSРезиновый контейнер — классика

1.container {2  /* до 1200px тянется, дальше стоит по центру */3  max-width: 1200px;4  margin: 0 auto;5  padding: 0 24px;6}78/* Картинка никогда не вылезет за родителя */9img {10  max-width: 100%;11  height: auto;12}

Где спотыкаются почти все

Не задан box-sizing: border-box

Почему Все расчёты ширины ломаются: колонки не помещаются, сетка расползается. Причину найти сложно, потому что «я же написал 33 процента».

Как надо Первым правилом в файле: *, *::before, *::after { box-sizing: border-box; }

Отступы между блоками заданы с двух сторон

Почему Из-за схлопывания получается не то расстояние, которое ожидал, и в разных местах по-разному.

Как надо Договорись с собой: только margin-bottom. Или используй gap во флексах и гридах.

Жёсткая высота у блока с текстом

Почему Текст длиннее ожидаемого — и он вылезает за рамку или обрезается.

Как надо Бери min-height: блок не будет ниже заданного, но при необходимости вырастет.

Отступ у последнего элемента списка

Почему Снизу образуется лишний зазор, из-за которого блок выглядит несимметрично.

Как надо .item:last-child { margin-bottom: 0; } — или просто перейди на gap.

Блочная модель box model: Четыре слоя любого элемента: content, padding, border, margin.
Внутренний отступ padding: Расстояние от содержимого до рамки. Закрашивается фоном элемента.
Внешний отступ margin: Расстояние до соседних элементов. Всегда прозрачный.
box-sizing box-sizing: Определяет, входят ли padding и border в заданную ширину.
Схлопывание отступов margin collapsing: Соседние вертикальные margin объединяются в один, равный большему.

contentнажми, чтобы перевернутьСамо содержимое: текст или картинка. Его размер задаёт width при content-box.

paddingнажми, чтобы перевернутьВнутренний отступ. Красится фоном элемента, кликается вместе с ним.

borderнажми, чтобы перевернутьРамка вокруг padding. Занимает место и влияет на итоговую ширину.

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

box-sizing: border-boxнажми, чтобы перевернутьwidth теперь считает всю коробку вместе с padding и border.

margin: 0 autoнажми, чтобы перевернутьЦентрирует блок по горизонтали, если у него задана ширина.

Задание

Карточка товара с точными отступами

Свёрстай карточку по описанию:

включи box-sizing: border-box для всех элементов;
ширина карточки ровно 280px — вместе с отступами и рамкой;
внутренний отступ 20px со всех сторон;
рамка 2px;
скругление 14px;
у заголовка внутри — отступ снизу не меньше 8px, сверху нулевой.

<article class="card">  <h2 class="card__title">Раф на кокосовом</h2>  <p class="card__text">Мягкий, сладкий, без коровьего молока.</p>  <p class="card__price">240 ₽</p></article>

/* Начни с box-sizing */.card {}

Открыть в песочнице

Подсказка 1

Первое правило: *, *::before, *::after { box-sizing: border-box; }

Подсказка 2

Рамке нужен стиль и цвет, иначе её не будет видно: border: 2px solid #ddd;

Подсказка 3

Заголовку: .card__title { margin: 0 0 8px; }

Показать решение

HTMLindex.html

1<article class="card">2  <h2 class="card__title">Раф на кокосовом</h2>3  <p class="card__text">Мягкий, сладкий, без коровьего молока.</p>4  <p class="card__price">240 ₽</p>5</article>

CSSstyle.css

1*, *::before, *::after {2  box-sizing: border-box;3}45.card {6  width: 280px;7  padding: 20px;8  border: 2px solid #e0e0ea;9  border-radius: 14px;10  background: #fff;11}1213.card__title {14  margin: 0 0 8px;15  font-size: 1.15rem;16}1718.card__text {19  margin: 0 0 12px;20  color: #5b6070;21  font-size: 0.9rem;22}2324.card__price {25  margin: 0;26  font-weight: 700;27}

Проверь себя

Первое правило в моём файле — box-sizing: border-box
Знаю все четыре слоя коробки и их порядок
Помню, что вертикальные отступы схлопываются
Задаю отступы в одну сторону, а не с двух
Беру max-width вместо width для контейнеров

Блочная модель: из чего сделана каждая коробка

Что ты научишься делать

#Каждый элемент — коробка

#Главная ловушка: 300 превращается в 340

#Починка одной строкой

#Сокращённые записи

#Схлопывание вертикальных отступов

#width, height и ограничители

Где спотыкаются почти все

Не задан box-sizing: border-box

Отступы между блоками заданы с двух сторон

Жёсткая высота у блока с текстом

Отступ у последнего элемента списка

Проверь себя

Карточка товара с точными отступами

Проверь себя

Горячие клавиши

В редакторе кода