CSSの長さの単位~“rlh”

“rlh”について

“rlh”はルート要素(HTMLでは“html”要素)の行の高さを“1rlh”と定義した相対単位です。

ルート要素の“line-height”プロパティの計算値を“1rlh”とします。

“line-height:normal;”である場合にはその要素の最初の使用可能なフォントのメトリックをもとに長さを算出します。

ルート要素の“line-height”プロパティの値に使用する場合やルート要素に文字の大きさが指定されていない場合、もしくはルート要素がないは“line-height”プロパティの初期値(“line-height:normal;”)をもとに長さを計算します。

“lh”とは違い“rlh”は指定する要素にかかわらず常にルート要素に指定された行の高さに依存するので要素の親子関係を考慮せずに長さを指定できます。

使用例

div.sample-box { font-size: 16px;}

p.font-3rlh { font-size: 3rlh;}
div.boxw-3rlh { width: 3rlh;}


文字の大きさ“16px”の親要素
<div class="sample-box">

文字の大きさ
<p class="font-3rlh">

猫は、上のかぎり黒くて、ことはみな白き。

</p>

長さ
<div class="boxw-3rlh">

width: 3rlh;

</div>

</div>

文字の大きさ“16px”の親要素

文字の大きさ

猫は、上のかぎり黒くて、ことはみな白き。

長さ

width:3rlh;