単位emの使い方〜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もデフォルトフォントサイズの高さを５倍した長さで表現されます。