Mengenal Unit dalam CSS: px, em, rem, %, vw, dan vh

Dalam CSS, unit digunakan untuk menentukan ukuran elemen, seperti font-size, margin, padding, width, dan height. Pemilihan unit yang tepat sangat penting karena akan memengaruhi tampilan, konsistensi, serta responsivitas sebuah website.

Berikut penjelasan tentang beberapa unit CSS yang paling sering digunakan:

1. px (Pixel)

Pixel adalah unit yang paling familiar bagi banyak developer. Satu px setara dengan satu titik pada layar perangkat. Unit ini bersifat absolut – artinya ukuran 16px akan selalu tampil sama di berbagai perangkat.
Kapan menggunakan px?

Untuk border (garis pembatas)
Untuk shadow (bayangan)
Ketika Anda membutuhkan presisi mutlak
Untuk ukuran yang harus konsisten terlepas dari pengaturan pengguna

Contoh: border: 2px solid black;

2. em

Em adalah unit yang relatif terhadap ukuran font elemen parent-nya. Jika elemen parent memiliki font-size 16px, maka 1em = 16px, 2em = 32px, dan seterusnya.

Keunikan em adalah sifatnya yang compound (berganda). Jika Anda memiliki struktur nested (bersarang), nilai em akan mengalikan secara beruntun.

Kapan menggunakan em?

Untuk spacing yang proporsional dengan ukuran teks
Dalam komponen yang membutuhkan skala relatif
Untuk margin dan padding yang berhubungan dengan typography

Contoh: padding: 1.5em; (akan relatif terhadap font-size parent)

3. rem (Root EM)

Rem (root em) mirip dengan em, tetapi selalu relatif terhadap ukuran font elemen root (biasanya <html>). Ini menghilangkan efek compounding yang kadang merepotkan dari em.

Kapan menggunakan rem?

Untuk ukuran font yang konsisten在整个网站中
Untuk layout yang perlu skalabel tetapi dapat diprediksi
Ketika Anda ingin menghindari kompleksitas nesting em

Contoh: font-size: 1.2rem; (selalu relatif terhadap root font size)

4. % (Persentase)

Persen selalu relatif terhadap elemen parent-nya. 50% artinya setengah dari ukuran parent.

Kapan menggunakan %?

Untuk width dan height yang responsif
Dalam layout grid dan flexbox
Untuk ukuran yang perlu menyesuaikan container-nya

Contoh: width: 50%; (setengah lebar parent)

5. Vw dan Vh

Vw (viewport width) dan Vh (viewport height) adalah unit yang relatif terhadap ukuran viewport (area tampilan browser). 1vw = 1% dari lebar viewport, 1vh = 1% dari tinggi viewport.

Kapan menggunakan vw/vh?