Inden dan Unit em dalam CSS

Katakan kita mempunyai tag berikut:

<div>
	<p>
		teks
	</p>
</div>

Katakan saiz fon perenggan ditetapkan dalam px:

p {
	font-size: 20px;
}

Mari kita tetapkan margin perenggan ini dalam unit em. Dalam kes ini, saiz inden akan dikira berdasarkan saiz fon perenggan itu sendiri, bukan induknya:

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

Sekarang katakan saiz untuk perenggan ditetapkan dalam em:

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

Mari kita tetapkan sekali lagi margin untuk elemen kita. Dalam kes ini, ia masih akan dikira berdasarkan nilai fon semasa elemen itu sendiri. Manakala nilai fon itu sendiri akan dikira relatif kepada induk:

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

Masalah Praktikal

Katakan kita mempunyai kod HTML, yang mana kita akan menyelesaikan masalah:

<section>
	<div>
		<p>
			teks
		</p>
	</div>
</section>

Tentukan, saiz fon dan inden yang mana dalam px akan dimiliki oleh tag div sebagai hasil pelaksanaan kod berikut:

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

Tentukan, saiz fon dan inden yang mana dalam px akan dimiliki oleh tag div sebagai hasil pelaksanaan kod berikut:

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

Tentukan, saiz fon dan inden yang mana dalam px akan dimiliki oleh tag div sebagai hasil pelaksanaan kod berikut:

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

Tentukan, saiz fon dan inden yang mana dalam px akan dimiliki oleh tag p sebagai hasil pelaksanaan kod berikut:

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

Tentukan, saiz fon dan inden yang mana dalam px akan dimiliki oleh tag p sebagai hasil pelaksanaan kod berikut:

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