CSSの長さの単位~“em”

“em”について

“em”はその要素の文字の大きさを“1em”と定義した相対単位です。

その要素の“font-size”プロパティの計算値を“1em”とします。

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

“em”を使用した長さは親要素や祖先要素の文字の大きさによって変動します。ルート要素の文字の大きさをもとに長さを計算したい場合には“rem”を使用します。

使用例

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

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


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

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

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

</p>

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

width: 3em;

</div>

</div>

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

文字の大きさ

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

長さ

width:3em;