CSSの長さの単位~“rch”

“rch”について

“rch”はルート要素を表示するのに使用されるフォントの“0(ゼロ、U+0030)”の文字の送り幅を“1rch”と定義した相対単位です。

ルート要素の“font-size”プロパティの値に使用する場合やルート要素がないは“font-size”プロパティの初期値をもとに長さを計算します。

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

使用例

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

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


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

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

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

</p>

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

width: 3rch;

</div>

</div>

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

文字の大きさ

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

長さ

width:3rch;