Memahami Satuan Ukuran Pada CSS (Px, Em, % (Persen))

Pada artikel ini, Kita membahas satuan ukuran pada CSS, yang diantaranya adalah Px, Em, & % (Persen). Satuan - satuan tersebut berguna untuk mengatur besar font, lebar, tinggi, margin, dan padding dari suatu elemen yang ada pada halaman website.

PX (Pixel)

Piksel adalah unsur gambar atau representasi sebuah titik terkecil dalam sebuah gambar grafis yang dihitung per inci (Wikipedia). Pada web design / CSS merupakan satuan ukuran utama dan paling umum digunakan. 1Px = 0.01 Inch.

Contoh :
"body{font-size: 16px; width: 1000px;}"

EM

Apa itu EM pada CSS? Em juga merupakan satuan ukuran, yang tujuan penggunaannya untuk mempermudah responsive font ataupun elemen, atau bisa juga menyingkat ukuran satuan px. Nilai 1em = font-size dalam ukuran Px elemen yang membungkusnya, misalnya pada elemen Konten font-size: 20px, maka 1em pada elemen tersebut adalah 20px, begitu pula kelipatan em selanjutnya. Contoh :

HTML

<div class='el em1'>Font Size: 20px; Lebar & Tinggi Dengan EM</div><div class='el em2'>Font Size: 16px; Lebar & Tinggi Dengan EM</div><div class='el em3'>Font Size: 12px; Lebar & Tinggi Dengan EM</div><div class='el px1'>Font Size: 20px; Lebar & Tinggi Dengan PX</div><div class='el px2'>Font Size: 16px; Lebar & Tinggi Dengan PX</div><div class='el px3'>Font Size: 12px; Lebar & Tinggi Dengan PX</div>

CSS

.el{margin: 3px;text-align: center;float: left} .em1{font-size: 20px; width: 10em; height: 5em; background: #fcb;} .em2{font-size: 16px; width: 10em; height: 5em; background: #fcb;} .em3{font-size: 13px; width: 10em; height: 5em; background: #fcb;} .px1{font-size: 20px; width: 200px; height: 5em; background: #6cf;} .px2{font-size: 16px; width: 160px; height: 80px; background: #6cf;} .px3{font-size: 12px; width: 120px; height: 60px; background: #6cf;}

TAMPILAN

• Pada contoh diatas, perhatikan CSS nya, elemen dengan Class em1 menggunakan font-size: 20px, width:10em, dan height: 5em, yang artinya width dari elemen tersebut sebesar 200px, didapat dari (1em = 20px , 10em = 200px).
• Perhatikan pula pada elemen Class px1 tetapi ukuran lebar dan tingginya menggunakan satuan px, bukankah kedua elemen tersebut (em1 dan px1) memiliki ukuran lebar dan tinggi yang sama?. 

Percentage / Persen / %

Persen (%) juga merupakan salah satu satuan ukuran pada CSS, yang sangat berguna untuk meresposive kan suatu elemen atau halaman website. Nilai dari 100% = maksimal ukuran suatu elemen atau besar font pada elemen induk atau elemen pembungkus. Contoh :

• Width / lebar suatu elemen outer-wrapper 1000px, maka lebar 100% dari elemen-elemen yang ada didalam outer-wrapper tersebut adalah 1000px, 80% = 800px, begitu pula selanjutnya.
• Pada font juga hampir sama, jika misalnya font size body diatur sebesar 16px, dan kita menerapkan font size pada content-wrapper 80% maka font tersebut sama halnya berukuran 12.8px.

Nah, demikianlah artikel ini Saya buat. Mohon maaf jika ada kesalahan penulisan atau penjelasan. Semoga dapat bermanfaat, Terima Kasih.