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

Close
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.

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

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
CSS
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.

4 komentar

Terimakasih telah berkunjung dan membaca artikel di Blog ini. Tinggalkan kritik, saran, dan pertanyaan pada kolom komentar.

terimakasih infonya ,,,, webnya banyak iklannya ngeselin,,,,,,,,

Balas

banyak spam n phasing karena akan muncul otomatis halaman yang menyatakan virus ada pada hp anda!

pasti artikel ini udah lama tidak di update sampai d tempeli spam spt itu..

Balas