Pengenalan kepada Unit em dalam CSS

Unit em membolehkan anda menetapkan saiz fon dalam peratusan daripada saiz elemen induk. Mari kita lihat contohnya.

Katakan kita mempunyai tag bersarang seperti berikut:

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

Mari tetapkan saiz fon untuk div kami:

div {
	font-size: 20px;
}

Dan untuk perenggan, tetapkan saiz kepada 2em. Nilai ini sepadan dengan fon dua kali ganda lebih besar daripada saiz fon induk:

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

Sekarang tetapkan saiz perenggan kepada 0.5em. Nilai ini sepadan dengan separuh saiz fon induk:

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

Nilai 1em akan menjadikan fon perenggan sama dengan fon div induk:

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

Masalah Amali

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

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

Tentukan saiz fon dalam px yang akan dimiliki oleh tag li hasil daripada pelaksanaan kod berikut:

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

Tentukan saiz fon dalam px yang akan dimiliki oleh tag li hasil daripada pelaksanaan kod berikut:

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

Tentukan saiz fon dalam px yang akan dimiliki oleh tag li hasil daripada pelaksanaan kod berikut:

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