Satuan Panjang di CSS (px,em dan %)
Di CSS itu ada beberapa satuan panjang yang dapat dipakai untuk mengisi value di beberapa property yang ada di css. Misalnya untuk mendefinisikan berapa lebarnya, tebal bordernya, besar font-nya, margin, padding dan lain-lain.
Ada tiga satuan panjang di CSS yang sering dipakai oleh orang-orang, yaitu pixel (px), em dan persen (%), selain ketiga itu sebenarnya masih ada lagi sih coba deh cari di gugel… hehe. Nah, di sini akan saya coba bahas tentang ketiga satuan panjang itu dan juga bedanya.
Untuk memperjelas, ada contoh penggunaannya :
Di contoh, saya menggunakan 3 buah div, satu untuk mencoba pixel, satu untuk em dan yang satu lagi untuk persen.
HTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Contoh Pemakaian px,em dan %</title>
<link rel="stylesheet" href="stylel.css" type="text/css" />
</head>
<body>
<div id="px">
<h1>Pixel</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In faucibus, arcu id suscipit faucibus, sem felis pharetra ante, at porttitor ligula eros et ante. Phasellus vestibulum, nunc eget malesuada vehicula, odio augue pharetra dui, eu pretium orci turpis at urna. Vivamus est enim, malesuada sit amet euismod vel, tincidunt sit amet nulla. Nullam orci magna, elementum sit amet malesuada eu, consectetur vel augue. Proin ut dui eu nibh dapibus porta. Nunc vel urna tellus, vitae consectetur turpis. Quisque dictum sodales gravida. Ut congue gravida mauris at gravida. Donec lacinia lacus a mi tempus cursus. Donec auctor tortor ac orci consectetur adipiscing. Integer at justo tellus.
</div>
<div id="em">
<h1>Em</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In faucibus, arcu id suscipit faucibus, sem felis pharetra ante, at porttitor ligula eros et ante. Phasellus vestibulum, nunc eget malesuada vehicula, odio augue pharetra dui, eu pretium orci turpis at urna. Vivamus est enim, malesuada sit amet euismod vel, tincidunt sit amet nulla. Nullam orci magna, elementum sit amet malesuada eu, consectetur vel augue. Proin ut dui eu nibh dapibus porta. Nunc vel urna tellus, vitae consectetur turpis. Quisque dictum sodales gravida. Ut congue gravida mauris at gravida. Donec lacinia lacus a mi tempus cursus. Donec auctor tortor ac orci consectetur adipiscing. Integer at justo tellus.
</div>
<div id="persen">
<h1>Persen</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In faucibus, arcu id suscipit faucibus, sem felis pharetra ante, at porttitor ligula eros et ante. Phasellus vestibulum, nunc eget malesuada vehicula, odio augue pharetra dui, eu pretium orci turpis at urna. Vivamus est enim, malesuada sit amet euismod vel, tincidunt sit amet nulla. Nullam orci magna, elementum sit amet malesuada eu, consectetur vel augue. Proin ut dui eu nibh dapibus porta. Nunc vel urna tellus, vitae consectetur turpis. Quisque dictum sodales gravida. Ut congue gravida mauris at gravida. Donec lacinia lacus a mi tempus cursus. Donec auctor tortor ac orci consectetur adipiscing. Integer at justo tellus.
</div>
</body>
</html> CSS :
*{
margin: 0px;
padding: 0px;
}
.box{
border: 1px solid #ccc;
margin: 10px auto;
padding: 10px;
}
#px{
width: 400px;
}
#em{
width: 20em;
}
#persen{
width: 30%;
}
1. Pixel (px)
Pixel ini merupakan satuan panjang yang besar kecilnya itu tergantung dari resolusi komputer yang kita pakai, misalnya untuk ukuran 800px akan terlihat sangat besar (menutupi layar) untuk komputer dengan resolusi 800 x 600, tapi akan tampak lebih kecil untuk resolusi 1024 x 768.
Untuk contoh kali ini, div yang pertama idnya px memiliki width yang satuan panjangnya pixel, yaitu sepanjang 400px, nah besar kecilnya 400px ini terlihat di monitor itu tergantung dari resolusi yang kita gunakan. Coba saja ganti-ganti resolusi komputer Anda saat melihat contoh ini.
2. em
em ini merupakan satuan panjang yang menunjukkan nilai berapa kalinya ukuran font yang sedang digunakan. Dari contoh, width-nya di set 20em, ini berarti width-nya itu sepanjang 20 x ukuran font yg digunakan, dalam hal ini ukuran font pada contoh (font-size) belum didefinisikan jadinya menggunakan ukuran font defaultnya browser yang kita gunakan.
Kalau di Firefox itu ukuran font defaultnya bisa di atur di tools->options->content->font and color disitu ada size-nya, coba aja diubah-ubah dan lihat contoh yang saya buat, lihat yang kotak bertuliskan em, pastinnya ukurannya yg terlihat juga akan berubah-ubah (membesar/mengecil) sesuai dengan ukuran font yang digunakan.
3. Persen (%)
Nah, kalau persen ini, ukurannya akan berubah-ubah sesuai ukuran browser kita, kalau 30% di contoh di atas ya 30% nya ukuran browser CMIIW. Coba deh browsernya di kecilin atau di gedein, pasti yang persen berubah-ubah..
Bagaimana apakah mengerti?? Silakan di explore lagi ya…
thanks..artikelnya bermanfaat sekali buat pembelajaran saya untuk lebih mendalami web designer…
Beberapa peramban malah make ukuran default font minimal setara 9px. Jadi, yang make ukuran px, keliatannya kecil banget.