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
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.
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.
Silahkan ditambahkan apabila ada kekurangan
Nah yang em ini,saya masih sedikit awam banget
simpelnya untuk em itu mengikuti tempatnya..
test link ke 2 Ini Link juga
test https://www.kang-ismet.com/2024/09/perbedaan-antara-px-em-dan-rem-pada-css.html