CSSでフォントサイズを指定するemとremの違いを確認します。

「em」は、継承されているフォントサイズを1とする単位です。15pxと継承されていれば、1emは15pxになります。一方、remは、root（html要素）で指定されたフォントサイズを1とする単位です。仮にhtmlで15pxと指定されていた場合、bodyなどで14pxと指定したとしても、1remは15pxになります。

次のサンプルでemとremを比較します。

サンプル（１）と（２）の共通のCSSソース

html {
	font-size:15px;
	}
.text02 div {
	font-size:1.2em;
	}
.text03 div {
	font-size:1.2rem;
	}

サンプル（１）のhtmlソース

  <div><div>(A)サンプルテキスト</div></div>
  <div class="text02"><div>(B)サンプルテキスト</div></div>
  <div class="text03"><div>(C)サンプルテキスト</div></div>

サンプル（１）

(A)のフォントサイズは、htmlで指定され継承された値の15pxになります。
(B)は「font-size:1.2em」を指定しているので、15px*1.2で18pxになります。
(C)は「font-size:1.2rem」を指定しているので、15px*1.2で同じく18pxになります。
このサンプル（１）では、emとremの違いは出ません。

次に入れ子にしてemとremの指定を繰り返します。

サンプル（２）のhtmlソース

/*--em指定の入れ子--*/
<div class="text02">
	<div>(B1)サンプルテキスト
		<div>(B2)サンプルテキスト
			<div>(B3)サンプルテキスト
			</div>
		</div>
	</div>
</div>

/*--rem指定の入れ子--*/
<div class="text03">
	<div>(C1)サンプルテキスト
		<div>(C2)サンプルテキスト
			<div>(C3)サンプルテキスト
			</div>
		</div>
	</div>
</div>

サンプル（２）

em指定、rem指定ともに同じ入れ子にしています。

em指定の(B1)では、15px*1.2で18pxになり、更に(B2)では18px*1.2で21.6pxに、更に(B3)では21.6px*1.2で26.2pxにと、値が大きく継承されながら、1.2倍を繰り返していることが分かります。

一方、rem指定の(C1)、(C2)、(C3)では、入れ子にしても、root（html）で指定した値に対して、1.2倍しているだけなので、すべて18pxになります。