Semua unit CSS: absolut, relatif font, relatif viewport, fungsi fluid, serta unit sudut, waktu, dan resolusi — apa acuan tiap unit dan kapan sebaiknya digunakan.
Unit absolut (px, pt) menjaga ukuran tetap apa pun konteksnya; unit relatif (rem, vw, %) berskala terhadap nilai acuan. Pilih rem untuk ukuran font: ia menghormati pengaturan ukuran font root pengguna, sehingga tipografi Anda menghormati preferensi aksesibilitas mereka. Gunakan clamp() untuk tipografi fluid yang membesar dan menyusut mengikuti viewport tanpa pernah melewati batas minimum atau maksimum.
Tabel referensi · 38 unit
Unit CSSExplained
38 of 38 rows
Absolut
1/96 inci (piksel referensi CSS).
Ukuran UI tetap: border, hairline, dimensi ikon.
border: 1px solid #000;
1/72 inci (1pt = 1.333px).
Stylesheet cetak, saat ukuran dipetakan ke kertas fisik.
font-size: 12pt;
1 sentimeter (≈37.8px).
Tata letak cetak yang butuh pengukuran dunia nyata.
margin: 2cm;
1 milimeter (≈3.78px).
Pengukuran cetak yang presisi.
padding: 5mm;
1 inci (96px = 2.54cm).
Tata letak cetak berukuran inci.
margin: 1in;
Relatif font
Ukuran font elemen itu sendiri (diwarisi dari induknya).
Spasi yang berskala bersama teks di sekitarnya.
padding: 1em;
Ukuran font elemen root (elemen html).
Ukuran font: menghormati pengaturan ukuran font root pengguna.
font-size: 1.25rem;
Lebar advance glyph '0' pada font saat ini.
Atur panjang baris yang nyaman dibaca (karakter per baris).
max-width: 70ch;
Tinggi-x font saat ini (tinggi huruf kecil 'x').
Metrik vertikal yang terikat pada typeface.
line-height: 2ex;
Tinggi kapital font saat ini (tinggi huruf kapital).
Metrik vertikal berdasarkan huruf kapital, lebih rapat daripada ex.
padding-top: 0.5cap;
Lebar advance ideogram '水' (air) pada font saat ini.
Penyizingan yang mengikuti satu sel karakter CJK.
width: 4ic;
Line-height terhitung milik elemen itu sendiri.
Ukur elemen dalam baris teks penuh.
height: 3lh;
Line-height elemen root.
Spasi dalam kelipatan tinggi baris dasar dokumen.
margin-block: 2rlh;
Relatif viewport
Nilai properti yang sama milik induk.
Tata letak fluid yang diukur terhadap elemen pembungkus.
width: 50%;
1% lebar viewport.
Seksi full-bleed yang diukur dari lebar layar.
width: 100vw;
1% tinggi viewport.
Seksi hero atau overlay yang membentang setinggi layar.
height: 100vh;
1% dimensi viewport yang lebih kecil.
Ukur elemen agar muat di layar pada orientasi mana pun.
font-size: 5vmin;
1% dimensi viewport yang lebih besar.
Isi poros dominan viewport.
font-size: 5vmax;
1% tinggi viewport kecil (UI browser sepenuhnya tampil).
Seksi mobile setinggi penuh yang muat di atas chrome browser yang mengembang.
height: 100svh;
1% tinggi viewport besar (UI browser tersembunyi).
Latar yang harus menutupi layar meski chrome browser menyusut.
height: 100lvh;
1% tinggi viewport dinamis, mengikuti UI browser saat tampil dan hilang.
Perbaikan mobile untuk 100vh: tingginya berubah ukuran saat chrome browser muncul.
height: 100dvh;
1% lebar viewport kecil.
Padanan lebar dari svh untuk keadaan viewport tersempit.
width: 100svw;
1% lebar viewport besar.
Padanan lebar dari lvh untuk keadaan viewport terlebar.
width: 100lvw;
1% lebar viewport dinamis, mengikuti UI browser.
Padanan lebar dari dvh saat viewport berubah ukuran bersama chrome.
width: 100dvw;
1% ukuran viewport pada poros inline (lebar pada mode tulis horizontal).
Penyizingan viewport yang mengikuti arah tulisan.
width: 50vi;
1% ukuran viewport pada poros blok (tinggi pada mode tulis horizontal).
Penyizingan viewport yang tetap benar pada mode tulis vertikal.
height: 50vb;
Fluid
Nilai pilihan yang dibatasi minimum dan maksimum.
Tipografi fluid yang tak pernah melewati batas minimum atau maksimum.
width: clamp(320px, 80vw, 1100px);
Yang terkecil dari argumen yang dipisahkan koma.
Batasi ukuran agar tak pernah melebihi maksimum.
width: min(100%, 600px);
Yang terbesar dari argumen yang dipisahkan koma.
Terapkan ukuran minimum yang tumbuh mengikuti viewport.
width: max(50%, 300px);
Sudut
1/360 lingkaran penuh.
Transformasi rotasi dan posisi sudut gradien.
transform: rotate(45deg);
Radian; 1rad ≈ 57.2958deg.
Sudut yang dihitung dari matematika, misalnya transformasi hasil generasi.
transform: rotate(1.5708rad);
Gradian; 400grad = lingkaran penuh.
Nilai sudut warisan atau bergaya survei.
transform: rotate(100grad);
1turn = satu lingkaran penuh 360°.
Rotasi penuh atau setengah yang mudah terbaca sekilas.
transform: rotate(0.5turn);
Waktu
Satu detik.
Durasi animasi dan transisi.
transition: opacity 0.3s;
Satu milidetik (1s = 1000ms).
Animasi dan jeda umpan balik UI yang singkat.
animation-duration: 150ms;
Resolusi
Titik per inci pada keluaran.
Media query resolusi untuk cetak.
@media (min-resolution: 300dpi)
Titik per unit px; 1dppx setara layar standar 96dpi.