← CSS7 / 62
rem: unit untuk ukuran yang bisa diakses
px bersifat mutlak. rem relatif terhadap ukuran font root (default 16px, jadi 1rem = 16px) — dan ikut membesar kalau pengguna memperbesar ukuran font di pengaturan browser. Untuk teks dan spacing, rem lebih ramah aksesibilitas; px masih wajar untuk border tipis. Patokan praktisnya: ukuran font, padding, dan margin memakai rem, sedangkan garis tepi tipis boleh tetap px.
👀 Contoh dulu
/* root default 16px */
.judul { font-size: 2rem; } /* = 32px */
.isi { font-size: 0.875rem; } /* = 14px */
.tombol { padding: 0.75rem 1.5rem; } /* = 12px 24px */Hasilnya: Ukuran terlihat sama seperti px biasa, tapi ikut membesar kalau pengguna menaikkan ukuran font di browsernya.
💡 Rumus cepat: nilai rem × 16 = px. Jadi 1.5rem = 24px, 0.5rem = 8px.
📝 Sekarang giliranmu
Beri .konten font-size: 1.25rem dan padding: 2rem.
Preview