Базовая линия

Понятие пришло из типографики. Большинство букв касаются этой линии нижним краем, а у «у», «р», «д» или латинских «g» и «p» хвостики-выносные элементы уходят ниже. Высота строчных букв от базовой линии называется высотой x (x-height), а расстояние между базовыми линиями соседних строк задаёт межстрочный интервал.

В CSS базовая линия — точка отсчёта для всего, что стоит в строке. По умолчанию vertical-align имеет значение baseline: картинка ставится нижним краем на базовую линию текста, а кнопка или inline-block с надписью — так, чтобы их собственный текст оказался на одной линии с окружающим. Как именно работает само свойство и какие у него значения, разобрано в статье про вертикальное выравнивание.

Загадочный зазор под картинкой

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

/* картинка как отдельный блок — зазора нет */
.gallery img { display: block; }

/* или оставить строчной, но сместить с базовой линии */
.icon { vertical-align: middle; }

Первый вариант подходит для фотографий в карточках, второй — для иконок рядом с текстом.

Выравнивание по базовой линии во flex и grid

Во флекс- и грид-контейнерах есть значение align-items: baseline. Оно ставит в ряд элементы разного размера так, чтобы совпали их первые строки текста. Пример — шапка карточки, где слева крупный заголовок, а справа мелкая дата: при выравнивании по центру текст оказывается на разной высоте и смотрится небрежно, а по базовой линии строки совпадают.

.card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

Шрифты и базовая линия

Положение базовой линии внутри строки зависит от метрик шрифта. Поэтому при замене шрифта текст на кнопках иногда «съезжает» вверх или вниз на пару пикселей, хотя стили не менялись. Это не ошибка вёрстки: у нового шрифта другие пропорции надстрочной и подстрочной частей. Исправляют это подбором line-height и внутренних отступов, а с недавних пор — и дескрипторами ascent-override и descent-override в @font-face.