Referensi unit CSS
Unit panjang CSS ada dua keluarga: unit absolut yang terpatok pada ukuran fisik, dan unit relatif yang menskala mengikuti font, induk, atau viewport. Untuk desain responsif Anda kebanyakan memakai yang relatif — terutama rem, %, dan unit viewport.
Diperbarui 2026-07-06
Unit absolut
| Unit | Arti |
|---|---|
| px | Piksel — unit dasar untuk layar. 1px adalah satu piksel independen perangkat. |
| pt | Poin — 1/72 inci. Umum di stylesheet cetak. |
| in | Inci — 1in = 96px = 2,54cm. |
| cm | Sentimeter — kebanyakan untuk cetak. |
| mm | Milimeter — kebanyakan untuk cetak. |
| pc | Pica — 1pc = 12pt = 1/6 inci. Jarang. |
Unit relatif
| Unit | Arti |
|---|---|
| % | Persentase dari nilai terkait elemen induk. |
| em | Relatif terhadap ukuran font elemen itu sendiri. 1.5em = 1,5× ukuran font. |
| rem | Relatif terhadap ukuran font root (html). Dapat diprediksi untuk penskalaan konsisten. |
| ex | Tinggi-x dari font saat ini (jarang dipakai). |
| ch | Lebar karakter '0' pada font saat ini. |
| vw | 1% dari lebar viewport. |
| vh | 1% dari tinggi viewport. |
| vmin | 1% dari dimensi viewport yang lebih kecil (lebar atau tinggi). |
| vmax | 1% dari dimensi viewport yang lebih besar. |
| fr | Sebagian dari ruang bebas dalam kontainer CSS Grid. |
em vs. rem: perbedaan utama
Keduanya menskala dengan ukuran font, tetapi em relatif terhadap ukuran font elemen saat ini (sehingga menumpuk melewati elemen bersarang), sedangkan rem selalu relatif terhadap ukuran font root (sehingga tetap dapat diprediksi sedalam apa pun bersarangnya). Bila ragu, rem untuk ukuran dan jarak paling sedikit kejutan.
Alat terkait