Perbedaan antara : PX, EM dan REM pada CSS

Pendahuluan

PX, EM dan REM - Ketika kita sedang mengedit template atau belajar CSS tentunya sering melihat penggunaan ukuran px, rem dan em. Lalu apa perbedaan antara ketiganya? Disini saya akan mencoba menjelaskan sedikit perbedaannya, semoga dapat difahami.

PX

Untuk px saya rasa sudah familiar ya. misal font-size:18px, artinya penggunaan font sebesar 18px. Dan px ini sifatnya fix.

Dalam kondisi tertentu, saya sering menggunakan px agar ukuran tidak berubah dengan elemen induk misalnya. Tapi tentunya hal ini disesuaikan dengan selera masing-masing.

REM

REM adalah kependekan dari Root Equal Measure (kalau tidak salah, silahkan di googling lagi ). Ukuran REM akan mengambil dari root sebuah website. Defaultnyaroot adalah sebesar 16px. Maka jika Anda menuliskan font-size:1rem sama artinya dengan mengunakan huruf sebesar 16px.

Apabila Anda menuliskan font-size:1.25rem artinya memberikan ukuran huruf sebesar 20px, karena 1.25 x 16 (root) = 20. Sebagai contoh lagi Anda menggunakan margin-bottom:.5rem artinya memberikan jarak ke bawah sebesar 8px, karena 0.5x16= 8

Uji coba sendiri !

Merubah ROOT

Untuk keperluan tertentu, misalkan Anda membutuhkan huruf standarnya (root) sebesar 20px. maka tambahkan CSS Root

:root{
   font-size:20px;
{

Maka ukuran yang saya jelaskan diatas akan berubah. Untuk font-size:1.25 besar hurufnya adalah 25px. Atau 1.25 x 20 (root) = 25px. Begitupun margin-bottom:.5rem artinya memberikan jarak ke bawah sebesar 10px, karena 0.5x20 = 10px.

Uji coba sendiri !

EM

Berbeda dengan EM, em tidak mengikuti elemen :root tapi mengikuti elemen induknya. Contohnya saya memiliki HTML seperti ini :

<div>
  <p>Ini adalah tag p, dibawah elemen induk div</p>
</div>

dengan CSS seperti ini :

div{
  font-size:1.5rem; /* ini 24px, dari root standard 16px */
}
p{
  font-size:.5em; /* Berapakah ini ? */
}

Yups.. jawaban Anda bisa betul atau bisa salah, tergantung memahaminya. Jawabannya adalah 12px, karena tidak mengikuti :root, tapi mengikuti elemen induk yaitu div yang mepunyai ukuran huruf 1.5 dari ukuran :root . maka 0.5 x 24 (elemen div) = 12.

Uji coba sendiri !

Silahkan ditambahkan apabila ada kekurangan