Unit CSS

CSS memiliki beberapa unit berbeda untuk menyatakan panjang.

Banyak properti CSS mengambil nilai "panjang", seperti width, margin, padding, font-size, dll.

Panjang adalah bilangan yang diikuti oleh satuan panjang, seperti 10px, 2em, dst.

Contoh

Menetapkan nilai panjang yang berbeda, menggunakan px (pixel):

h1 {
  font-size: 60px;
}

p {
  font-size: 25px;
  line-height: 50px;
}

Catatan: Spasi putih tidak dapat muncul di antara angka dan unit. Namun, jika nilainya 0, unit dapat dihilangkan.

Untuk beberapa properti CSS, panjang negatif diperbolehkan.

Ada dua jenis satuan panjang: absolut dan relatif.

Panjang Absolut

Satuan panjang absolut adalah tetap dan panjang yang dinyatakan dalam salah satu dari satuan ini akan muncul persis seperti ukuran itu.

Satuan panjang absolut tidak disarankan untuk digunakan di layar, karena ukuran layar sangat bervariasi. Namun, mereka dapat digunakan jika media outputnya diketahui, seperti untuk cetak layout.

Unit	Keterangan
cm	centimeters
mm	milimeters
in	inches (1in = 96px = 2.54cm)
px *	pixels (1px = 1/96th of 1in)
pt	points (1pt = 1/72 of 1in)
pc	picas (1pc = 12 pt)

*Pixel (px) relatif terhadap perangkat tampilan. Untuk perangkat dengan dpi rendah, 1px adalah satu piksel perangkat (dot) dari tampilan. Untuk printer dan layar resolusi tinggi 1px menggambarkan beberapa piksel perangkat.

Panjang Relatif

Satuan panjang relatif menentukan panjang relatif terhadap properti panjang lainnya. Unit panjang relatif skala lebih baik diantara media rendering yang berbeda.

Unit	Keterangan
em	Relatif terhadap ukuran font elemen (2em berarti 2 kali ukuran font saat ini)
ex	Relatif terhadap x-height dari font saat ini (jarang digunakan)
ch	Relatif terhadap lebar "0" (nol)
rem	Relatif terhadap ukuran font elemen root
vw	Relatif terhadap 1% dari lebar viewport*
vh	Relatif terhadap 1% dari ketinggian viewport*
vmin	Relatif terhadap 1% dari viewport* dimensi yang lebih kecil
vmax	Relatif terhadap 1% dari viewport* dimensi yang lebih besar
%	Relatif terhadap elemen induk (parent)

Tips: Unit em dan rem prakteknya digunakan dalam membuat tata letak (layout) yang dapat diskalakan dengan sempurna.

*Viewport = ukuran jendela browser. Jika viewport lebarnya 50cm, maka 1vw = 0,5cm.

Sumber referensi: w3schools