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

Berita Lebih Baru Berita Lebih Lama
  • Djangkaru Bumi
    Profil: https://www.blogger.com/profile/00526825525563935443
    26 September, 2024

    Nah yang em ini,saya masih sedikit awam banget

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      02 Oktober, 2024

      simpelnya untuk em itu mengikuti tempatnya..

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      04 Oktober, 2024

      test link ke 2 Ini Link juga

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      04 Oktober, 2024

      test https://www.kang-ismet.com/2024/09/perbedaan-antara-px-em-dan-rem-pada-css.html

Tambahkan Komentar
comment url
Terima kasih telah berkomentar di Blog Kang Ismet.
  • Untuk menyisipkan Gambar, Kode, atau Kutipan silahkan klik Tab Sisipkan di atas.
  • Emoji yang bisa digunakan pada komentar :), :D, :( <3, :love dan :top
  • Untuk melihat Komentar yang telah ditambah sisipan kunjungi DEMO
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Klik tombol Salin Kode! lalu paste ke kolom komentar.


image quote pre code
4 Komentar