単位の指定 %,em,rem

emと%でのフォントサイズの指定

emと%は親要素のサイズに対し相対単位で計算されます。

親要素のフォントサイズ 10px
100% = 10px
200% = 20px
2em = 20px

1em=100%。親要素のサイズに対して計算されるので2emの入れ子の状態になるとこうなります。200%*200%=400%

親要素:2em*子要素:2em = 40px

remでは親要素ではなく最上位(root em)を基準に適用されるため、入れ子でフォントサイズが大きくなることはありません。
便利な単位ですが、IE8では使えないためIE8をターゲットに含めるなら%,emも併用する必要があります。

親要素が10pxで子要素に2remを指定

2rem

親要素10px、子要素2rem、孫要素2remの入れ子

2rem

関連記事