Piksel menjadi em
Konversi px menjadi em menggunakan ukuran font elemen induk. em bersifat relatif terhadap induk langsungnya — berguna ketika padding tombol harus disesuaikan dengan teks labelnya, atau indentasi daftar bertumpuk mengikuti ukuran badan lokal. Rumus: em = px ÷ parentFontSizePx.
Piksel
Ukuran font induk (px)
Hasil
1em
Cara mengubah px menjadi em
1. Identifikasi ukuran font elemen induk dalam px (misalnya 18 px).
2. Masukkan nilai px yang akan dikonversi (misalnya spasi huruf 9 px).
3. Baca hasilnya (9 18 = 0,5 em).
4. Terapkan dalam CSS pada elemen anak yang dicakup ke induk tersebut konteks.
Px ke contoh-contohnya
Padding tombol
Font induk 16 px; padding vertikal 8 px → 0,5 em. Berskala jika induk menjadi 18 piksel pada layar besar.
Judul bertingkat
Font bagian 20 piksel; subjudul desain 24 px → 1,2 em relatif terhadap bagian, bukan root.
Penjajaran ikon
Ikon sebaris 14 px dengan baris teks 16 px → kotak ikon 0,875 em sejajar dengan metrik teks.
Kapan mengonversi px ke em
• Kapan internal komponen harus diskalakan dengan lokal ukuran font berubah.
• Saat Anda menata teks kaya dengan judul berada di dalam wadah dengan ukuran berbeda.
• Saat CSS lama menggunakan em dan Anda memetakan desain px baru ke dalam sistem yang sama.
Kapan memilih sesuatu yang lain
• Bila Anda menginginkan spasi yang konsisten di seluruh situs — rem dari root lebih sederhana.
• Saat penumpukan dalam menyebabkan em bug yang bertambah — lebih memilih rem untuk margin.
• Saat Anda membutuhkan ukuran relatif viewport — gunakan vw/vh.
Menghindari jebakan yang memperparah
Menu yang sangat bertumpuk dengan ukuran font: 0,9em di setiap level akan menyusutkan teks secara tidak terduga. Lebih memilih rem untuk ukuran font pada tingkat struktural; gunakan em untuk padding lokal yang diikat ke satu induk. Dokumentasikan asumsi induk dalam token desain.
em untuk kueri media?
Kueri media unit secara historis mereferensikan default browser (16 px), bukan induk komponen. Desain responsif modern sering kali menggunakan breakpoint rem atau px — ketahui konteks mana yang menjadi target stylesheet Anda.
Pertanyaan yang sering diajukan
Apa perbedaan antara em dan rem?
em mereferensikan ukuran font induk; rem mereferensikan ukuran font root (html) saja.
Mengapa em bersarang digabungkan?
Setiap level dikalikan: 1,2 em di dalam 1,2 em parent = 1,44 × root jika keduanya berlaku untuk rantai ukuran font.
Rumus?
em = px parentFontSizePx. Selalu gunakan ukuran font yang dihitung dari induk langsung.
Padding di em?
Ya — padding/margin dalam skala em dengan ukuran font elemen sendiri (untuk margin/padding, spesifikasi menggunakan ukuran font elemen).
Kapan em berasal?
Biasanya "lebar huruf kapital M" dalam tipe logam; sekarang ditentukan relatif terhadap ukuran font di CSS.
Apakah data diunggah?
Tidak. Konversi berjalan secara lokal.