Sebagian besar properti CSS membutuhkan panjang: lebar kartu, jarak padding, ukuran font, hingga radius sudut. Nilai panjang selalu terdiri dari angka dan satuan, misalnya 120px atau 1.5rem, dan pasangan inilah yang menentukan seberapa besar elemen digambar. Masalahnya, tidak semua satuan bersifat sama: px bersifat tetap, sementara em dan rem berubah mengikuti ukuran font. Pada Chapter ini kita fokus pada tiga satuan yang paling sering dipakai sehari-hari, membiasakan konversi antar-satuan, dan memverifikasinya lewat demo.

px: Panjang yang Pasti #

Satuan px (piksel) bersifat absolut: 120px selalu berarti 120 piksel CSS, tanpa memandang ukuran font di sekitarnya. Kepastian ini membuat px nyaman untuk detail visual yang harus presisi, seperti lebar garis tepi 1px, radius sudut 4px, atau bayangan.

Kepastian itu juga menjadi kebatasan. Bila seluruh ukuran halaman ditulis dalam px, pengguna yang menaikkan ukuran font bawaan browser melalui pengaturan tidak melihat perubahan apa pun pada layout. Perlu dibedakan pula dari zoom: ketika pengguna men-zoom halaman, nilai px ikut diperbesar bersama seluruh halaman, tetapi preferensi font di pengaturan browser tidak memengaruhinya. Karena itu, konvensi yang lazim adalah memakai px untuk garis dan bayangan, sementara ukuran teks dan jarak utama memakai satuan relatif yang kita bahas berikutnya. Rincian kedua kelompok satuan kita lanjutkan pada Chapter Absolute dan Relative Units .

em dan rem: Panjang yang Mengikuti Font #

rem (root em) adalah kelipatan dari font-size elemen root (html). Browser menyetel font-size root bawaan sebesar 16px, sehingga 1.5rem dihitung sebagai 1,5 × 16px = 24px. Karena rujukannya tunggal, rem mudah diprediksi dan menjadi satuan favorit untuk ukuran font, padding, dan gap.

em lebih fleksibel tetapi butuh kejelian. Untuk properti font-size, satu em berarti font-size elemen induk. Untuk properti lain seperti padding dan margin, satu em berarti font-size elemen itu sendiri. Artinya, dua deklarasi padding: 1em dapat menghasilkan nilai berbeda bila font-size kedua elemennya berbeda.

Kombinasi ketiganya menghasilkan pedoman praktis yang lazim dipakai tim: px untuk detail visual yang harus presisi seperti garis tepi dan bayangan, rem untuk tipografi dan jarak utama agar mengikuti preferensi pengguna, dan em untuk komponen yang seluruh ukurannya perlu menskalakan mengikuti font sendiri — tombol dengan padding: 0.75em 1.25em tetap berproporsi baik pada teks besar maupun kecil.

MDN: length mendokumentasikan seluruh satuan panjang beserta rujukan perhitungannya.

Demo: Konversi px, em, dan rem #

Demo berikut menempatkan keempat pola di satu halaman:

css 
.bar-px {
  width: 120px;
}
.teks-rem {
  font-size: 1.5rem;
}
.teks-em {
  font-size: 2em;
}
.kotak-em {
  font-size: 16px;
  padding: 1.5em;
  border-radius: 0.5rem;
}

Mari kita telaah baris demi baris:

  1. Baris 1–3 (.bar-px): lebar ditulis langsung dalam piksel, sehingga nilainya pasti 120px di layar mana pun.
  2. Baris 4–6 (.teks-rem): 1.5rem dikalikan font-size root 16px menghasilkan 24px.
  3. Baris 7–9 (.teks-em): untuk font-size, 2em mengikuti font-size induk. Induknya adalah body berukuran 16px, sehingga hasilnya 32px.
  4. Baris 10–12 (.kotak-em): font-size elemen ini 16px, sehingga padding: 1.5em menghasilkan padding 24px di setiap sisi — satu em di sini mengikuti font-size elemen sendiri, bukan induk.
  5. Baris 13 (border-radius: 0.5rem): 0,5 × 16px menghasilkan sudut membulat 8px, kini berdasarkan root.

Hasil di Browser:

text 
Bilah biru tampil selebar 120px.
Teks "1.5rem" berukuran 24px; teks "2em" berukuran 32px
(2 × font-size induk 16px).
Kartu dengan padding 1.5em memiliki padding 24px di setiap sisi
dan sudut membulat 8px (0.5rem).

Demo pada chapter ini membawa penanda uji data-expected untuk width, font-size, padding-top, dan border-radius pada keempat elemen contoh. Harness Course memeriksa nilai computed tersebut langsung di headless browser, sehingga konversi yang kita hitung di atas terverifikasi otomatis.