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