Satuan CSS

Satuan CSS

CSS memiliki beberapa jenis satuan panjang yang berbeda untuk mewakili panjang.

Banyak properti CSS menerima nilai "panjang", seperti width,margin,padding,font-size dan lainnya.

Panjang adalah angka yang diikuti dengan satuan panjang, seperti 10px,2em dan lainnya.

Contoh

Gunakan px (pixel) untuk mengatur nilai panjang yang berbeda:

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

Coba sendiri

Tidak boleh ada spasi di antara angka dan satuan. Namun, jika nilai adalah 0, satuan dapat dilewati.

Untuk beberapa properti CSS, mengizinkan panjang negatif.

Ada dua jenis satuan panjang:Satuan absolutdanSatuan relatif.

Panjang absolut

Satuan panjang absolut tetap, ukuran yang diwakili dengan satuan panjang absolut akan ditampilkan dengan akurat ukurannya.

Tidak disarankan untuk menggunakan satuan panjang absolut di layar, karena ukuran layar berubah-ubah. Namun, jika media output diketahui, mereka dapat digunakan, misalnya untuk layout cetak (print layout).

satuan deskripsi TIY
cm Cm Coba Itu
mm Mm Coba Itu
in Inch (1in = 96px = 2,54 cm) Coba Itu
px * Pixel (1px = 1/96 dari 1 inci) Coba Itu
pt Titik (1pt = 1/72 dari 1 inci) Coba Itu
pc Pica (1pc = 12 pt) Coba Itu

* Pixel (px) adalah relatif terhadap peralatan penonton. Untuk peralatan dengan dpi rendah, 1px adalah titik peralatan (point) di layar monitor. Untuk printer dan layar resolusi tinggi, 1px mewakili beberapa titik peralatan.

Panjang relatif

Satuan panjang relatif diatur untuk panjang yang berhubungan dengan satuan panjang lain. Satuan panjang relatif menunjukkan penyesuaian yang lebih baik diantara media perendering yang berbeda.

satuan deskripsi TIY
em ukuran font untuk elemen (font-size) (2em artinya 2 kali ukuran font saat ini) Coba Itu
ex bersifat x-height untuk font saat ini (digunakan jarang) Coba Itu
ch lebar untuk "0" (nol) Coba Itu
rem ukuran font (font-size) untuk elemen root Coba Itu
vw bersifat 1% untuk lebar viewport* Coba Itu
vh bersifat 1% untuk tinggi viewport* Coba Itu
vmin bersifat kecil 1% untuk ukuran viewport* Coba Itu
vmax Relatif terhadap ukuran yang lebih besar viewport * 1% Coba Itu
% Relatif terhadap elemen orang tua Coba Itu

Petunjuk:Unit em dan rem dapat digunakan untuk menciptakan tata letak yang dapat diperluas dengan sempurna!

* Viewport (Viewport) = ukuran jendela browser. Jika viewport 50 cm lebar, maka 1vw = 0.5 cm.

Dukungan Browser

Angka di tabel menunjukkan versi pertama browser yang mendukung satuan panjang ini.

Satuan Panjang
em, ex, %, px, cm, mm, in, pt, pc 1.0 3.0 1.0 1.0 3.5
ch 27.0 9.0 1.0 7.0 20.0
rem 4.0 9.0 3.6 4.1 11.6
vh, vw 20.0 9.0 19.0 6.0 20.0
vmin 20.0 12.0 19.0 6.0 20.0
vmax 26.0 16.0 19.0 7.0 20.0