lh and rlh units
lh は要素自身の line-height を1単位とし、rlh はルート要素（html）の line-height を1単位とする相対単位。テキストの行間に合わせた余白や高さの指定が可能で、タイポグラフィベースの垂直リズムをCSSだけで正確に実現できる。line-height が変更されても自動で追従する。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
css.types.length.lh | 109 | 109 | 120 | 16.4 | 109 | 16.4 |
基本構文
CSS
.text-block {
line-height: 1.6;
margin-bottom: 1lh; /* One line of spacing */
}
.sidebar {
/* Specify height based on the root line height */
max-height: 20rlh;
overflow-y: auto;
}
.drop-cap::first-letter {
font-size: 3lh;
float: left;
line-height: 1;
}ライブデモ
実務での使いどころ
-
垂直リズムの統一
lh 単位で余白を指定し、テキストの垂直リズムを行の高さに正確に揃える。
-
ドロップキャップ
先頭文字のサイズを lh 単位で指定し、本文の行に正確に合わせた装飾文字を作成する。
注意点
- line-height が normal（ブラウザ依存）の場合、lh 単位の実際の値がブラウザ間で異なる可能性がある。
アクセシビリティ
- lh 単位は line-height に連動するため、ユーザーがline-heightをカスタマイズした場合にも適切にスケーリングされる利点がある。