CSSにおける継承とem単位

次に、より深いネスト構造がある場合を考えてみましょう：

<main>
	<div>
		<p>
			text
		</p>
	</div>
</main>

mainタグに以下のフォントサイズが設定されているとします：

main {
	font-size: 10px;
}

divタグのフォントサイズをem単位で設定します：

div {
	font-size: 2em; /* 20pxに相当 */
}

段落のフォントサイズもem単位で設定します。この場合、段落のサイズは既に計算されたdivのフォントサイズを基準として計算されます：

p {
	font-size: 2em; /* 40pxに相当 */
}

実践問題

以下のHTMLコードを使用して問題を解いていきます：

<section>
	<div>
		<p>
			text
		</p>
	</div>
</section>

以下のコードを実行した結果、divのフォントサイズは何pxになるか答えなさい：

section {
	font-size: 10px;
}
div {
	font-size: 2em;
}

以下のコードを実行した結果、段落のフォントサイズは何pxになるか答えなさい：

section {
	font-size: 10px;
}
div {
	font-size: 2em;
}
p {
	font-size: 1.5em;
}

以下のコードを実行した結果、段落のフォントサイズは何pxになるか答えなさい：

section {
	font-size: 40px;
}
div {
	font-size: 0.5em;
}
p {
	font-size: 0.5em;
}