Строковый бокс

Когда браузер раскладывает абзац, он не видит в нём сплошной текст. Он набирает строку из слов, ссылок, иконок и картинок, пока она помещается по ширине, и замыкает её в прямоугольник — строковый бокс. Затем начинает следующий. Абзац из пяти строк — это пять строковых боксов, сложенных друг под другом. Так устроен строчный контекст форматирования.

Ширина строкового бокса обычно равна ширине блока, но плавающие элементы её сокращают: так текст обтекает картинку. Высота зависит от содержимого строки: от line-height каждого строчного элемента и от того, как они выровнены по вертикали.

Как вычисляется высота строки

• У каждого строчного элемента есть своя высота строки из line-height.
• Элементы выравниваются по базовой линии или иначе, если задан vertical-align.
• Строковый бокс растягивается так, чтобы вместить всех: от самой высокой точки до самой низкой.
• Даже пустая строка учитывает «распорку» — невидимый символ со шрифтом и межстрочным интервалом блока.

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

Пример: щель под картинкой

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

/* Было: под фото видна полоска фона */
.card img { width: 100%; }

/* Решение 1: картинка перестаёт быть строчной */
.card img { display: block; }

/* Решение 2: выровнять не по базовой линии */
.card img { vertical-align: middle; }

Где ещё проявляется

Свойство text-align распределяет содержимое внутри каждого строкового бокса, поэтому оно центрирует и текст, и строчные блоки вроде кнопок. Фон и рамка у ссылки, разорванной на две строки, рисуются отдельно в каждом строковом боксе; как оформить места разрыва, задаёт box-decoration-break. А вертикальное выравнивание иконки рядом с текстом почти всегда решается настройкой вертикального выравнивания и line-height, а не подбором отступов.