CSSの長さの単位~“lh”

“lh”について

“lh”はその要素での行の高さを“1lh”と定義した相対単位です。

その要素の“line-height”プロパティの計算値を“1lh”とします。

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

“line-height”プロパティの値に使用する場合やその要素に直接行の高さが指定されていない場合は親要素の計算値を使用して長さを計算します。親要素や祖先要素にも行の高さが指定されていない場合、もしくは親要素や祖先要素がない場合は“line-height”プロパティの初期値をもとに計算します。

使用例

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

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


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

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

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

</p>

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

width: 3lh;

</div>

</div>

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

文字の大きさ

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

長さ

width:3lh;