Pengenalan Unit em di CSS

Unit em memungkinkan Anda mengatur ukuran font dalam persentase dari ukuran elemen induk. Mari kita lihat contohnya.

Misalkan kita memiliki tag bersarang seperti ini:

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

Mari kita atur ukuran font untuk div kita:

div {
	font-size: 20px;
}

Dan untuk paragraf, atur ukurannya menjadi 2em. Nilai ini sesuai dengan font yang dua kali lebih besar dari ukuran font induk:

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

Sekarang atur ukuran paragraf menjadi 0.5em. Nilai ini sesuai dengan setengah ukuran font induk:

p {
	font-size: 0.5em; /* sesuai dengan 10px */
}

Nilai 1em akan membuat font paragraf sama dengan div induknya:

p {
	font-size: 1em; /* sesuai dengan 20px */
}

Tugas Praktis

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

<ul>
	<li>teks</li>
	<li>teks</li>
	<li>teks</li>
</ul>

Tentukan, ukuran font berapa dalam px yang akan dimiliki tag li sebagai hasil dari kode berikut:

ul {
	font-size: 10px;
}
li {
	font-size: 2em;
}

Tentukan, ukuran font berapa dalam px yang akan dimiliki tag li sebagai hasil dari kode berikut:

ul {
	font-size: 20px;
}
li {
	font-size: 1.5em;
}

Tentukan, ukuran font berapa dalam px yang akan dimiliki tag li sebagai hasil dari kode berikut:

ul {
	font-size: 30px;
}
li {
	font-size: 0.5em;
}