Halo teman-teman semuanya, setelah sebelumnya kita belajar tentang pseudo-class dan pseudo-element, kali ini kita akan membahas topik penting lainnya dalam CSS, yaitu unit ukuran.
Dalam CSS, kita tidak hanya menentukan apa yang ingin diatur (seperti width, padding, font-size), tetapi juga berapa besar ukurannya, dan ini ditentukan menggunakan satuan seperti px, %, em, rem, vw, vh, dan lain-lain.
Memahami cara kerja setiap unit akan sangat membantu kita membuat layout yang fleksibel, responsif, dan konsisten.
1. px (pixel)
Satuan tetap berbasis piksel. Sangat umum digunakan, terutama untuk ukuran presisi.
div {
width: 200px;
font-size: 16px;
}
- Kelebihan: stabil dan mudah dikontrol.
- Kekurangan: tidak fleksibel untuk responsif.
2. % (persen)
Satuan relatif terhadap elemen induknya.
div {
width: 50%; /* 50% dari elemen induk */
}
- Kelebihan: fleksibel dalam layout responsif.
- Catatan: konteks penting —
height: 100% bisa jadi tidak terlihat jika elemen induk tidak memiliki tinggi.
3. em
Satuan relatif terhadap ukuran font dari elemen induk.
p {
font-size: 1.5em; /* 1.5 kali ukuran font induk */
}
4. rem (root em)
Mirip dengan em, tapi ukuran selalu berdasarkan elemen root (<html>).
html {
font-size: 16px;
}
p {
font-size: 2rem; /* 32px */
}
- Kelebihan: konsisten, tidak terpengaruh nesting.
- Rekomendasi: banyak digunakan untuk font-size, padding, dan margin.
5. vw (viewport width) & vh (viewport height)
Relatif terhadap ukuran layar pengguna.
1vw = 1% dari lebar layar1vh = 1% dari tinggi layar
.hero {
width: 100vw;
height: 100vh;
}
Kelebihan: cocok untuk desain full-screen, seperti header, landing page, atau splash section.
Perbandingan Singkat
| Unit |
Relatif ke |
Cocok untuk |
px |
Nilai tetap (piksel) |
Presisi, ikon, border |
% |
Elemen induk |
Layout responsif |
em |
Font-size elemen induk |
Teks bertingkat |
rem |
Font-size elemen root |
Teks konsisten |
vw |
Lebar layar (viewport) |
Layout full-width |
vh |
Tinggi layar (viewport) |
Hero section, full-page |
Contoh Lengkap
Contoh berikut menampilkan penggunaan berbagai unit ukuran dalam satu halaman.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Unit Ukuran CSS</title>
<style>
html {
font-size: 16px;
}
.kotak-px {
width: 200px;
height: 100px;
background-color: lightblue;
margin-bottom: 10px;
}
.kotak-persen {
width: 50%;
height: 100px;
background-color: lightgreen;
margin-bottom: 10px;
}
.kotak-em {
font-size: 1.5em;
padding: 1em;
background-color: salmon;
margin-bottom: 10px;
}
.kotak-rem {
font-size: 2rem;
padding: 1rem;
background-color: gold;
margin-bottom: 10px;
}
.kotak-viewport {
width: 100vw;
height: 20vh;
background-color: orchid;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="kotak-px">Kotak dengan px</div>
<div class="kotak-persen">Kotak dengan % (50% lebar)</div>
<div class="kotak-em">Kotak dengan em (relatif induk)</div>
<div class="kotak-rem">Kotak dengan rem (relatif root)</div>
<div class="kotak-viewport">Kotak dengan vw dan vh</div>
</body>
</html>
Halaman ini memiliki lima kotak dengan satuan yang berbeda-beda. Masing-masing kotak menampilkan efek ukuran berdasarkan px, %, em, rem, dan vw/vh, sehingga kita bisa membandingkan fleksibilitas dan hasil tampilan.
Kesimpulan
CSS menyediakan berbagai unit ukuran yang bisa disesuaikan dengan kebutuhan layout dan desain. Unit seperti px cocok untuk presisi, sedangkan em dan rem cocok untuk teks yang skalabel. vw dan vh sangat berguna untuk membuat elemen yang menyesuaikan layar.
Terima Kasih