В 2018 году в мире CSS были анонсированы две новые относительные единицы измерения: lh и rlh. В апреле 2020 года они официально вошли в спецификацию CSS, но
Что такое lh и rlh?
эквивалентна высоте строки элемента, выраженной через значение свойства1lhЕдиница измерения line-height. В свою очередь, 1rlh представляет собой высоту строки корневого элемента (отсюда буква «r» в названии
Важно отметить, что по спецификации 1lh не обязательно соответствует реальной высоте строки. Например, если строка содержит текст разных шрифтов или размеров, фактическая высота строки может отличаться от теоретической. Эти единицы измерения основаны на расчетной высоте идеальной пустой строки, а реальная высота строки может варьироваться в зависимости от ее содержимого.
Применение lh и rlh для вертикального выравнивания
Единица измерения lh особенно полезна для задач, связанных с вертикальным выравниванием, например, при центрировании иконок или других элементов с inline-block отображением. Использование lh позволяет добиться более точного выравнивания элементов относительно текстовой строки, что особенно актуально для дизайна с динамическим контентом.
Пример использования:
.icon {
vertical-align: 1lh;
}
Этот код гарантирует, что иконка будет выровнена по центру относительно текстовой строки, независимо от ее реальной высоты.
Возможности и перспективы
Использование lh и rlh открывает новые возможности для адаптивного дизайна, позволяя более гибко управлять выравниванием элементов в зависимости от высоты строки. Эти единицы измерения особенно полезны в случаях, когда шрифты и их размеры могут меняться в зависимости от контекста, но при этом необходимо сохранить визуальную гармонию и аккуратное выравнивание.
Заключение
Единицы измерения lh и rlh добавляют в арсенал веб-разработчика еще больше инструментов для точного и гибкого управления версткой. Эти нововведения позволяют более точно настраивать вертикальное выравнивание элементов, что особенно важно для создания адаптивных и эстетически приятных интерфейсов.
