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:

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

Mari tetapkan saiz fon untuk div kami:

cssdiv {
  font-size: 20px;
}

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

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

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

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

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

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

Masalah Amali

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

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

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

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

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