CSSにおけるインデントとem単位

次のタグがあるとします：

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

段落のフォントサイズがpxで設定されているとします：

p {
	font-size: 20px;
}

この段落のマージンをem単位で設定してみましょう。この場合、インデントのサイズは親要素ではなく、段落自体のフォントサイズから計算されます：

p {
	font-size: 20px;
	margin: 2em;  /* 40pxに対応 */
}

今度は、段落のサイズがemで設定されているとします：

div {
	font-size: 20px;
}
p {
	font-size: 2em; /* 40pxに対応 */
}

もう一度要素のmarginを設定してみましょう。この場合、マージンは依然として要素自体の現在のフォントサイズ値から計算されます。ただし、フォントサイズ自体の値は親要素に対して相対的に計算されます：

div {
	font-size: 20px;
}
p {
	font-size: 2em; /* 40pxに対応 */
	margin: 2em;    /* 80pxに対応 */
}

実践的な課題

課題を解くためのHTMLコードがあるとします：

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

次のコードを実行した結果、divタグのフォントサイズとpx単位でのインデントサイズがどうなるかを決定してください：

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

次のコードを実行した結果、divタグのフォントサイズとpx単位でのインデントサイズがどうなるかを決定してください：

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

次のコードを実行した結果、divタグのフォントサイズとpx単位でのインデントサイズがどうなるかを決定してください：

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

次のコードを実行した結果、pタグのフォントサイズとpx単位でのインデントサイズがどうなるかを決定してください：

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

次のコードを実行した結果、pタグのフォントサイズとpx単位でのインデントサイズがどうなるかを決定してください：

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