Sering menggunakan satuan unit em dan rem di CSS tetapi masih belum mengerti dari unit tersebut ?

Keduanya merupakan relative unit (persentase unit) tidak seperti px (pixel).

  • em (presentase dari ukuran parent)
  • rem (presentase dari ukuran root element)

Lihat contoh dibawah ini :

body{
   font-size:16px;   
   line-height:2em; 
}

div {
font-size:24px;
}

p {
font-size: 2em;
}

div p{
font-size:0.5em;
}

/* Berapakah Ukuran Font element ini ? /*
div span{
 font-size:2rem;
}

Dari contoh di atas maka bisa dijelaskan seperti berikut :

  • ukuran root element berada di body  Tiap element memiliki line-height 2em (2 * 16px = 32px)
  • Tag div memiliki ukuran font = 24px
  • Tag p memiliki ukuran font 2em (2 * 16px = 32px), karena element parent dari p adalah body.
  • Tag div  p memiliki ukuran 0.5em (0.5 * 24px = 12), karena element parent dari tag p adalah div

Yang jadi pertanyaan, bagaimana dengan ukuran font dari tag span di dalam div (div span) ?

apakah 48px atau 32px ?

Maka jawabannya adalah 32px. Kenapa ? karena tag span didalam div tersebut memiliki satuan rem (root element) yaitu mengambil ukuran font dari body sebagai root.

Semoga bermanfaat, bila ada kesalahan mohon di koreksi di kolom komentar, terima kasih.