Skip to main content

EM vs REM

em dan rem merupakan salah dua dari satuan yang digunakan untuk ukuran pada css. Pada kali ini akan dibahas satuan tersebut dan apa perbedaannya

REM​

Root Emphasis adalah satuan yang terikat dengan element root. yang dimaksud element root ini adalah tag <html>. Maka dari itu setiap element child memiliki satuan rem, child tersebut akan memiliki ukuran x dari jumlah rootnya

rem

sebagai contoh

Root tag

<html> = 16px

Child tag

<p> = 2rem

Dengan demikin ukuran tag <p> yaitu sebesar 2 x ukuran tag <html> yaitu 2 x 16 = 32 px Dan itu berlaku disemua elemen childnya

EM​

Emphasis adalah satuan yang bergantung pada element parentnya. sebagai contoh

<html>
  <body>
    <div>
      <p>Child div</p>
    </div>
    <p>Child body</p>
  </body>
</html>

em

Tag <p> disini memiliki parent tag <div>, Maka dari itu ukuran p akan tegantung dari ukuran tag divnya

Contoh: jika body memiliki ukuran 16px div memiliki ukuran 32px p sebagi child div memiliki 2 em p sebagai child body memiliki 2 em

maka dari ukuran tersebut tag p jika diubah ke satuan px akan menjadi p pertama = 64px p kedua = 32 px

meskipun ukurannya sama 2 em tapi ketika di load di browser akan memiliki ukuran yang berbeda