Dalam dunia desain web, ukuran dan proporsi elemen sangat menentukan kenyamanan tampilan. CSS menyediakan berbagai satuan ukuran (CSS units) untuk mengatur ukuran teks, lebar, tinggi, dan jarak antar elemen. Namun, memahami perbedaan antara satuan seperti px, em, rem, %, vw, dan vh sering kali menjadi tantangan bagi pemula.
Melalui panduan ini, kamu akan belajar CSS units secara lengkap — dari konsep dasar, perbedaan antar satuan, hingga cara penggunaannya dalam layout responsif modern. Artikel ini juga menyertakan contoh kode CSS agar kamu bisa langsung mempraktikkannya.
Daftar isi
- Apa Itu CSS Units?
- Jenis-Jenis CSS Units dan Penjelasannya
- Perbedaan Antara Absolute dan Relative Units CSS
- Contoh Penggunaan Kombinasi CSS Units
- Cara Menentukan Satuan CSS yang Tepat
- Perbedaan px, em, dan rem
- Menggunakan CSS Units untuk Typography Responsif
- CSS calc() dengan Unit Campuran
- Tips Menggunakan CSS Units dengan Efektif
- Contoh Lengkap Layout Responsif dengan CSS Units
- Kesimpulan
Baca juga: Belajar CSS Grid Layout dari Dasar hingga Mahir
Apa Itu CSS Units?
CSS units atau satuan CSS adalah nilai yang digunakan untuk menentukan ukuran suatu properti, seperti font-size, width, margin, padding, dan lainnya.
Satuan ini terbagi menjadi dua kategori utama:
- Absolute units (satuan absolut)
Ukurannya tetap dan tidak berubah meski tampilan layar berubah.
Contoh satuan absolut:px,cm,mm,in,pt,pc. - Relative units (satuan relatif)
Ukurannya bergantung pada elemen induk, root (html), atau viewport.
Contoh:em,rem,%,vw,vh.
Jenis-Jenis CSS Units dan Penjelasannya
1. px (Pixel)
px adalah satuan paling umum dalam CSS.
Merupakan satuan absolut, yang berarti ukurannya tidak tergantung pada elemen lain.
p {
font-size: 16px;
margin: 20px;
}Code language: CSS (css)- Kelebihan: Presisi tinggi, cocok untuk desain yang tidak memerlukan responsivitas.
- Kekurangan: Tidak fleksibel pada tampilan yang berbeda.
2. em (Relative to Parent Font Size)
Satuan em adalah satuan relatif terhadap ukuran font elemen induk.
Jika elemen induk memiliki font-size: 16px, maka 1em = 16px.
div {
font-size: 16px;
}
p {
font-size: 1.5em; /* = 24px */
}Code language: CSS (css)Catatan: Penggunaan em bersifat “turun-temurun” (inheritance). Jadi jika elemen anak menggunakan em, ukurannya bisa membesar jika dikalikan dari induknya.
3. rem (Relative to Root Font Size)
rem artinya root em, yaitu satuan relatif terhadap ukuran font dari elemen <html>.
Tidak dipengaruhi oleh induk lain.
html {
font-size: 16px;
}
p {
font-size: 1.5rem; /* = 24px */
}Code language: CSS (css)- Lebih stabil daripada
em. - Cocok untuk desain responsif dan konsisten.
4.% (Persentase)
Satuan % menyesuaikan ukuran elemen berdasarkan konteks elemen induk.
Sering digunakan pada layout dan tinggi/lebar elemen.
.container {
width: 80%;
}
img {
width: 100%;
}Code language: CSS (css)- Cocok untuk layout fluid (mengalir mengikuti lebar layar).
- Dapat digunakan pada
font-size,padding, ataumargin.
5. vw dan vh (Viewport Width & Height)
1vw= 1% dari lebar viewport.1vh= 1% dari tinggi viewport.
section {
height: 100vh; /* memenuhi tinggi layar */
width: 100vw; /* memenuhi lebar layar */
}Code language: CSS (css)Kelebihan:
- Ideal untuk layout full-screen dan hero section.
- Cocok untuk desain responsif.
6. vmin dan vmax
vmin= 1% dari sisi terkecil viewport.vmax= 1% dari sisi terbesar viewport.
div {
font-size: 5vmin; /* ukuran font menyesuaikan sisi terkecil layar */
}Code language: CSS (css)Sangat berguna untuk elemen yang tetap proporsional di semua ukuran layar.
7. ch dan ex
ch= lebar karakter “0” pada font yang digunakan.ex= tinggi huruf kecil “x”.
Contoh:
p {
width: 60ch; /* ideal untuk panjang paragraf */
}Code language: CSS (css)Biasanya digunakan untuk kontrol lebar teks agar tetap mudah dibaca.
Perbedaan Antara Absolute dan Relative Units CSS
| Jenis | Contoh | Sifat | Cocok Untuk |
|---|---|---|---|
| Absolute Units | px, cm, mm, in | Tetap, tidak responsif | Desain cetak, layout tetap |
| Relative Units | em, rem, %, vw, vh | Menyesuaikan konteks | Layout responsif, web modern |
Contoh Penggunaan Kombinasi CSS Units
Berikut contoh layout responsif menggunakan kombinasi berbagai unit:
html {
font-size: 16px;
}
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
}
.hero {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.hero h1 {
font-size: 3rem;
letter-spacing: 0.1em;
}Code language: CSS (css)Penjelasan:
vhdigunakan untuk tinggi layar penuh.remmembuat teks tetap proporsional.%menjaga layout tetap responsif di berbagai perangkat.
Cara Menentukan Satuan CSS yang Tepat
| Tujuan | Satuan Direkomendasikan |
|---|---|
| Ukuran teks global | rem |
| Margin & padding relatif terhadap teks | em |
| Layout fleksibel | % |
| Desain full-screen | vh & vw |
| Presisi tetap | px |
Perbedaan px, em, dan rem
| Satuan | Relatif terhadap | Responsif | Catatan |
|---|---|---|---|
px | Layar | ❌ | Ukuran tetap |
em | Elemen induk | ✅ | Bisa membesar turunan |
rem | Root (HTML) | ✅ | Konsisten dan stabil |
Menggunakan CSS Units untuk Typography Responsif
Gunakan kombinasi clamp() agar ukuran font fleksibel tapi tetap terbatas:
h1 {
font-size: clamp(1.5rem, 5vw, 3rem);
}Code language: CSS (css)Artinya:
- Minimum 1.5rem
- Ideal mengikuti 5% lebar viewport
- Maksimum 3rem
Fungsi ini sangat efektif untuk responsive typography CSS.
CSS calc() dengan Unit Campuran
CSS memungkinkan kombinasi beberapa satuan dengan fungsi calc():
.main {
width: calc(100% - 2rem);
}Code language: CSS (css)Gunakan calc() saat kamu ingin menggabungkan nilai absolut (px) dan relatif (%, rem, dll) dalam satu deklarasi.
Tips Menggunakan CSS Units dengan Efektif
- Gunakan rem untuk konsistensi ukuran teks.
- Hindari
pxuntuk layout responsif. - Gunakan
%,vw,vhuntuk elemen fleksibel. - Gunakan
clamp()untuk teks responsif. - Gunakan
chuntuk batas panjang teks agar tetap nyaman dibaca.
Contoh Lengkap Layout Responsif dengan CSS Units
<div class="wrapper">
<header>
<h1>Belajar CSS Units</h1>
</header>
<main>
<p>CSS units membantu kamu menciptakan desain web responsif.</p>
</main>
</div>Code language: HTML, XML (xml)html {
font-size: 16px;
}
.wrapper {
width: 90%;
margin: 0 auto;
padding: 2rem;
}
header {
height: 20vh;
background: #f0f0f0;
}
h1 {
font-size: 2.5rem;
letter-spacing: 0.05em;
}
main p {
font-size: 1rem;
line-height: 1.6;
}Code language: CSS (css)Hasilnya: tampilan tetap proporsional di berbagai ukuran layar.
Kesimpulan
Memahami CSS units adalah langkah penting dalam membangun desain web responsif.
Dengan memahami perbedaan antara px, em, rem, %, vw, dan vh, kamu bisa membuat layout yang konsisten, fleksibel, dan mudah dikelola.
Gunakan absolute units untuk elemen yang perlu presisi, dan relative units untuk desain yang adaptif terhadap berbagai ukuran layar.
Dengan menguasai berbagai satuan CSS ini, kamu akan lebih siap membuat desain web modern yang profesional dan nyaman di semua perangkat.
