いきなりですが、クイズです！

このようなHTMLがあります。



このHTMLに以下のようにスタイルを設定したときdivのfont-sizeはいくらになるでしょう。

①


②


 
 
わかりましたか？

では正解発表です。下のリンクからどうぞ。「チェック用」となっているほうには同じサイズになるように、px単位でfont-sizeを指定しています。
①答え

②答え

①と②の違いはfont-sizeの単位です。emとremはどう違うのか。

○emとは
emは相対単位と言って、親要素のサイズに対しその何倍かという計算をしてサイズを設定します。なので、先ほどの例であれば、（16*1.5*2*1.5）=72pxになります。他に％が相対単位になります。それに対してpxはそれ独自にサイズを指定するので、絶対単位といいます。

○remとは
remは:root emの略で、htmlのサイズに対してその何倍かでサイズを設定し、親要素の影響を受けません。なので、先ほどの例では、(16px*2rem)=32pxとなります。これがemとremの違いです。

個人的にはremを使うことをおすすめします。なぜなら、例えば前回紹介したdisplay:inline-bloock;のときに親要素にfont-size:0;を設定すると、emでは0にかけ算することになるので、文字サイズを設定できません。親要素を考慮に入れて混乱することを避けるためにもremを使っていくのがいいのではないでしょうか。

参考サイト:フォントサイズの指定はCSS3の「rem」が便利そう