rlh unit
rlhは「root line height」の略で、ルート要素のline-heightの値を基準とするCSS長さ単位です。lh単位がその要素自身のline-heightを基準とするのに対し、rlhは常にルート要素のline-heightを基準にします。バーティカルリズム（垂直方向のリズム）を維持したレイアウト設計において、マージンやパディングを行の高さの倍数で指定する際に有用です。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
css.types.length.rlh | 111 | 111 | 120 | 16.4 | 111 | 16.4 |
基本構文
CSS
html {
line-height: 1.5;
}
.paragraph {
margin-bottom: 1rlh;
}
.section {
padding: 2rlh;
}ライブデモ
実務での使いどころ
-
バーティカルリズムの維持
余白をルート要素の行の高さの倍数で設定し、ページ全体で一貫した垂直方向のリズムを実現します。
注意点
- ルート要素のline-heightが単位なしの数値で指定されている場合、rlhはルートのフォントサイズに対する計算値となります。
アクセシビリティ
- rlh単位でバーティカルリズムを維持することで、読みやすさが向上し、認知障害のあるユーザーにも配慮したレイアウトが可能です。