Indentasi dan Unit em di CSS

Misalkan kita memiliki tag berikut:

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

Misalkan ukuran font paragraf diberikan dalam px:

p {
	font-size: 20px;
}

Mari kita atur margin paragraf ini dalam unit em. Dalam hal ini, ukuran indentasi akan dihitung dari ukuran font paragraf, bukan dari ukuran font induknya:

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

Sekarang misalkan paragraf diberikan ukuran dalam em:

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

Mari kita berikan lagi margin kepada elemen kita. Dalam hal ini, margin akan terus dihitung dari nilai font saat ini dari elemen itu sendiri. Sementara itu, nilai font itu sendiri akan dihitung relatif terhadap induknya:

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

Tugas Praktis

Misalkan kita memiliki kode HTML, yang untuknya kita akan menyelesaikan tugas:

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

Tentukan, ukuran font dan indentasi seperti apa dalam px yang akan dimiliki tag div sebagai hasil dari eksekusi kode berikut:

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

Tentukan, ukuran font dan indentasi seperti apa dalam px yang akan dimiliki tag div sebagai hasil dari eksekusi kode berikut:

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

Tentukan, ukuran font dan indentasi seperti apa dalam px yang akan dimiliki tag div sebagai hasil dari eksekusi kode berikut:

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

Tentukan, ukuran font dan indentasi seperti apa dalam px yang akan dimiliki tag p sebagai hasil eksekusi kode berikut:

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

Tentukan, ukuran font dan indentasi seperti apa dalam px yang akan dimiliki tag p sebagai hasil eksekusi kode berikut:

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