Satuan CSS

Satuan CSS

CSS memiliki beberapa satuan yang berbeda untuk menunjukkan panjang.

Banyak properti CSS yang menerima nilai 'panjang', seperti width,margin,padding,font-size dll.

Panjang adalah angka yang diikuti dengan unit panjang, seperti 10px,2em dll.

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 unit. Namun, jika nilai adalah 0, unit dapat dilewati.

Untuk beberapa properti CSS, mengizinkan penggunaan panjang negatif.

Ada dua jenis unit panjang:Unit absolutdanUnit relatif.

Panjang absolut

Unit panjang absolut tetap, panjang yang diwakili dengan setiap panjang absolut akan ditampilkan dengan ukuran yang sama.

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

Unit Deskripsi TIY
cm Sentimeter Coba
mm Millimeter Coba
in Inch (1in = 96px = 2.54cm) Coba
px * Pixel (1px = 1/96 1in) Coba
pt Titik (1pt = 1/72 1in) Coba
pc Pika (1pc = 12 pt) Coba

* Pixel (px) adalah relatif terhadap peralatan penonton. Untuk peralatan dpi rendah, 1px adalah titik peralatan papan显示器 (poin). Untuk printer dan layar resolusi tinggi, 1px mewakili beberapa titik peralatan.

Panjang relatif

Unit panjang relatif menentukan panjang relatif terhadap properti panjang lainnya. Unit panjang relatif menunjukkan performa skala yang lebih baik di antara media render yang berbeda.

Unit Deskripsi TIY
em Relatif terhadap ukuran font elemen (font-size) (2em adalah 2 kali ukuran font saat ini) Coba
ex Relatif terhadap x-height font saat ini (sangat jarang digunakan) Coba
ch Relatif terhadap lebar "0" (nol) Coba
rem Ukuran font relatif terhadap elemen akar (font-size) Coba
vw Relatif terhadap lebar viewport 1% Coba
vh Relatif terhadap tinggi viewport 1% Coba
vmin Relatif terhadap ukuran yang lebih kecil viewport 1% Coba
vmax Relatif terhadap ukuran yang lebih besar viewport 1% Coba
% Relatif terhadap elemen induk Coba

Petunjuk:Unit em dan rem dapat digunakan untuk membuat tata letak yang bagus dapat beresapan!

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

Dukungan browser

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

单位 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