単位emの使い方〜CSS

HTML&CSS

単位のエム(em)の定義は次のようになっています。

‘em’という相対単位は、それが使われた要素の’font-size’ の算出値を参照する。 例外は’font-size’自身にこの単位を用いた場合で、その時は親要素の’font-size’ の算出値を参照する。 この単位は縦横の大きさを示すのに用いる

つまり幅(width)として使用する場合は対象の要素のfont-sizeの高さが使用され、font-size自身を表す単位の場合は親要素の’font-size’ の算出値を参照します。

例として次のようなもので確認します。

<p class="large">あ</p>
<p class="small">あ</p>
.large{
	font-size: 5em;
	width:5em;
	background-color:#0CF;
}
.small{	
	width:5em;
	background-color:#0CF;
}

結果は次のようになります。.large の方はfont-size: 5emの高さの5倍だけwidthがとられます。80px x 5 = 400px
一方.smallはfont-size:の指定がありませんので、親要素のサイズが継承されています。(デフォルトのサイズ16px)
widthもデフォルトフォントサイズの高さを5倍した長さで表現されます。
em

スポンサーリンク

お勧め書籍

AI関連

Python

JavaScript

HTML CSS関連

統計学

HTML&CSS
スポンサーリンク
dororoをフォローする
IT工房|AI入門とWeb開発
タイトルとURLをコピーしました