解 説

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

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

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

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

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