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:

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

Mari kita atur ukuran font untuk div kita:

cssdiv {
  font-size: 20px;
}

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

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

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

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

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

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

Tugas Praktis

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

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;
}