Коробка и поток: отступы, схлопывание, em и rem

Каждый элемент браузер рисует прямоугольником — коробкой. Как коробки встают относительно друг друга, решает свойство display. Два его значения уже встречались в первой главе: block — отдельной полосой, inline — внутри строки, как слово. Пока раскладку не меняли, блоки подчиняются нормальному потоку: каждый следующий встаёт под предыдущим, в том порядке, в каком они записаны в разметке.

Проверим на колонке шириной 200 пикселей с тремя блоками высотой 30, 50 и 20. Ширина задана только второму — 120, и справа от него остаётся 80 свободных пикселей. У самой колонки высоты нет. Прогноз: где встанет третий блок — справа от второго или под ним? Какой ширины окажутся первый и третий и какой высоты вся колонка?

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Нормальный поток: блоки стопкой</title>
  <style>
  .col { width: 200px; }
  .a { height: 30px; }
  .b { width: 120px; height: 50px; }
  .c { height: 20px; }
</style>
</head>
<body>

<div class="col">
  <div class="a"></div>
  <div class="b"></div>
  <div class="c"></div>
</div>
</body>
</html>

measure(".col > div", "y");
measure(".col > div", "width");
measure(".col", "height");

Ширина блока приходит сверху, от родителя, а высота — снизу, от содержимого. Вопрос «почему блок такого размера» почти всегда решается этой парой.

Строчные элементы — <span>, <a>, <em> — живут по другим правилам. Они встают в строку друг за другом, как слова, и переносятся на следующую, когда место кончается. На строчный элемент с текстом width и height не действуют: его размер задаёт текст. Дальше в статье речь о блоках.

Коробка блока состоит из четырёх слоёв, от середины наружу:

Одно значение, как в padding: 20px, задаёт отступ со всех четырёх сторон. Для одной стороны есть отдельные свойства — margin-top, margin-bottom, padding-left и так далее, — и каждое из них можно спросить по имени, не спрашивая остальные.

У карточки ниже ширина 200, внутренний отступ 20, рамка 5 и внешний отступ 15. Внутри — блок высотой 30 без ширины. Прогноз: какой высоты будет карточка, какой ширины блок внутри и на каком y он начнётся?

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Коробка в четыре слоя</title>
  <style>
  .card { width: 200px; padding: 20px; border: 5px solid; margin: 15px; }
  .kid { height: 30px; }
</style>
</head>
<body>

<div class="card"><div class="kid"></div></div>
</body>
</html>

measure(".card", "height");
measure(".kid", "width");
measure(".kid", "y");

Так считает песочница учебника, но не CSS по умолчанию. Что входит в width, решает свойство box-sizing. Две карточки ниже одинаковы во всём, кроме одного: второй явно сказано box-sizing: content-box. Прогноз: какая ширина окажется у каждой — и почему они разные при одинаковой разметке?

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Коробка в четыре слоя</title>
  <style>
  .card { width: 200px; height: 20px; padding: 20px; border: 5px solid; }
  .old { box-sizing: content-box; }
</style>
</head>
<body>

<div class="card"></div>
<div class="card old"></div>
</body>
</html>

measure(".card", "width");
measure(".card", "box-sizing");

По стандарту умолчание — content-box. Откуда тогда border-box у первой карточки, в стилях которой о нём ни слова? Его ставит правило для * — то самое, чей селектор напечатал rules() в разборе сброса стилей песочницы. На вашей странице без такого сброса width: 200px с теми же отступами и рамкой даст коробку 250.

Блок шире, чем написано в width? Проверьте box-sizing: при content-box к ширине прибавляются padding и рамка.

Симптом, с которым это всплывает в жизни, ровно тот, что обещан в лиде: вы написали width: 200px, добавили внутренний отступ 20 и рамку 5 — и блок занял 250 пикселей, сломав раскладку в три колонки. При content-box ширина описывает содержимое, а отступы и рамка прибавляются снаружи; при border-box в ширину входит всё, и 200 остаются 200. Поэтому сброс с border-box для всех элементов стоит почти в каждом проекте: с ним размеры в разметке и в голове совпадают.

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Коробка в четыре слоя</title>
  <style>
  .form { width: 200px; }
  .field { width: 100%; padding: 10px; border: 2px solid; }
  .old { box-sizing: content-box; }
</style>
</head>
<body>

<div class="form">
  <input class="field old">
  <input class="field">
</div>
</body>
</html>

measure(".field", "width");

В части II те же слои читает JavaScript: у элемента есть отдельные числа для ширины вместе с рамкой и для ширины без неё. В примерах, где их меряют, box-sizing: content-box стоит явно. Теперь понятно зачем: без него песочница посчитала бы коробку по своему сбросу, и арифметика не сошлась бы. Эти числа разбирает статья о размерах элемента: offset, client и scroll.

Внешние отступы соседних блоков ведут себя неожиданно. Ниже два блока высотой 40: у первого внешний отступ снизу 30, у второго сверху 20. Прогноз: на каком y начнётся второй блок?

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Схлопывание отступов</title>
  <style>
  .box { height: 40px; }
  .a { margin-bottom: 30px; }
  .b { margin-top: 20px; }
</style>
</head>
<body>

<div class="box a"></div>
<div class="box b"></div>
</body>
</html>

measure(".box", "y");

Схлопываются только вертикальные отступы, горизонтальные складываются всегда. И только в потоке: у flex-элементов, до которых глава ещё дойдёт, отступы не схлопываются вовсе.

На практике схлопывание чаще всего отвечает на вопрос «почему просвет между карточками 20, а не 40». У каждой карточки внешний отступ сверху и снизу по 20, и соседние отступы не складываются, а выбирают больший. Это же объясняет, почему первый элемент списка иногда уезжает от заголовка дальше, чем задумано: его верхний отступ схлопывается с отступом контейнера и вылезает наружу — следующий раздел как раз про это.

Схлопываются не только соседи. Верхний отступ первого ребёнка схлопывается с верхним отступом родителя, если между ними нет ни внутреннего отступа, ни рамки. Отступ оказывается снаружи родителя и сдвигает его целиком. С нижним отступом последнего ребёнка происходит то же, если высота родителя не задана. Ниже два блока .wrap, в каждом ребёнок высотой 20 с отступом сверху 25. Второму блоку добавлен display: flow-root. Прогноз: на каких y начнутся оба блока и оба ребёнка?

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Отступ, который вытекает из родителя</title>
  <style>
  .child { margin-top: 25px; height: 20px; }
  .fixed { display: flow-root; }
</style>
</head>
<body>

<div class="wrap"><div class="child"></div></div>
<div class="wrap fixed"><div class="child"></div></div>
</body>
</html>

measure(".wrap", "y");
measure(".child", "y");

display: flow-root делает блок корнем собственного потока: отступы детей больше не схлопываются через его край и остаются внутри. Снаружи он остаётся обычным блоком потока. Внутренний отступ или рамка у родителя тоже останавливают отступ, но меняют размер родителя, а flow-root — нет. display: flow-root — Baseline widely с 15.07.2022, пишите.

Сцена, на которую пример кладёт вашу разметку, сама стоит с display: flow-root. Иначе отступ первого блока вытекал бы из неё, и y считался бы не от того края. Этим объясняется число из раздела о слоях: блок внутри карточки начался на 40, и в эти 40 вошли 15 внешнего отступа самой карточки.

Отступ первого ребёнка сдвинул весь родительский блок? Отступ вытек: дайте родителю display: flow-root.

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Отступ, который вытекает из родителя</title>
  <style>
  .wrap { width: 200px; }
  .kid { float: left; width: 50px; height: 100px; }
  .fixed { display: flow-root; }
</style>
</head>
<body>

<div class="wrap"><div class="kid"></div></div>
<div class="wrap fixed"><div class="kid"></div></div>
</body>
</html>

measure(".wrap", "height");

Из потока элемент можно и вынуть совсем. position: absolute ставит его по координатам, а соседи смыкаются, будто его нет. От какого края считаются эти координаты и почему значок иногда улетает из карточки, разбирает следующая статья главы — позиционирование: сдвиг и якорь.

Отступы не обязательно писать в пикселях. Единица em равна размеру шрифта. Вы встречали её в листе стилей браузера: у заголовка font-size: 2em и отступы по 0.67em. Правило оттуда стоит повторить: в самом font-size em — размер шрифта родителя, во всех остальных свойствах — размер шрифта самого элемента. Единица rem устроена проще: это размер шрифта корня страницы, элемента <html>, где бы ни стоял элемент.

У карточки шрифт 20px, у абзаца внутри свой шрифт не задан. Внутренний отступ абзаца слева — 1em, внешний — 1rem. Прогноз: сколько пикселей в каждом?

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>em и rem: размеры от шрифта</title>
  <style>
  .card { font-size: 20px; }
  .card p { padding-left: 1em; margin-left: 1rem; }
</style>
</head>
<body>

<div class="card"><p>Текст</p></div>
</body>
</html>

measure("p", "padding-left");
measure("p", "margin-left");

Если в настройках браузера другой размер шрифта, пикселей выйдет иначе — и у вас, и в разборе. Это не поломка, а смысл rem. Масштаб страницы — Ctrl и плюс, в macOS Cmd и плюс — увеличивает всё, и пиксели тоже. А размер шрифта в настройках меняет только размеры, которые от него считаются: в rem и в em, если выше по дереву никто не задал шрифт в пикселях. Человеку, который выбрал крупный шрифт, чтобы легче читать, текст в rem подчинится, а текст в пикселях — нет.

Размер шрифта удобно писать в rem: он следует за настройкой читателя и не зависит от вложенности. В em — то, что должно расти вместе со шрифтом самого элемента, например внутренний отступ кнопки.

Главная ловушка em — вложенность. font-size: 0.75em у элемента внутри такого же элемента даёт три четверти от трёх четвертей, и каждый следующий уровень мельче предыдущего: на четвёртом уровне текст уже не прочитать. Отсюда правило, которое экономит часы: размеры шрифта пишут в rem, а в em — только то, что должно расти вместе со шрифтом своего элемента, например внутренний отступ кнопки. Ловушку вложенности вы посчитаете во второй задаче.