Unit di CSS: Contoh Satuan Panjang dan Angka

Section Artikel

1 Unit CSS
2 Panjang Absolut
3 Panjang Relatif
4 Browser Pendukung

Unit CSS

CSS memiliki beberapa unit berbeda untuk mengekspresikan panjang.

Banyak properti CSS menggunakan nilai “length”, seperti width, margin, padding, font-size, dll.

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

Spasi putih tidak boleh 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 ditetapkan dan panjang yang dinyatakan dalam satuan ini akan tampak persis dengan ukuran tersebut.

Satuan panjang absolut tidak disarankan untuk digunakan di layar, karena ukuran layar sangat bervariasi. Namun, bisa digunakan jika media keluarannya diketahui, seperti untuk tata letak cetak.

Unit	Deskripsi
cm	centimeters
mm	millimeters
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)

Kode cm :

<!DOCTYPE html>
<html>
<head>
<style>
h1 {font-size: 1.5cm;}
h2 {font-size: 1cm;}
p {
  font-size: 0.5cm;
  line-height: 1cm;
}
</style>
</head>
<body>

<h1>Ini heading 1</h1>
<h2>Ini heading 2</h2>
<p>Ini sebuah paragraph.</p>
<p>Ini paragraph yang lain.</p>

</body>
</html>

Kode mm :

<!DOCTYPE html>
<html>
<head>
<style>
h1 {font-size: 15mm;}
h2 {font-size: 10mm;}
p {
  font-size: 5mm;
  line-height: 10mm;
}
</style>
</head>
<body>

<h1>Ini heading 1</h1>
<h2>Ini heading 2</h2>
<p>Ini sebuah paragraph.</p>
<p>Ini paragraph yang lain.</p>

</body>
</html>

Kode in :

<!DOCTYPE html>
<html>
<head>
<style>
h1 {font-size: 1in;}
h2 {font-size: 0.5in;}
p {
  font-size: 0.2in;
  line-height: 0.5in;
}
</style>
</head>
<body>

<h1>Ini heading 1</h1>
<h2>Ini heading 2</h2>
<p>Ini sebuah paragraph.</p>
<p>Ini paragraph yang lain.</p>

</body>
</html>

Kode px* :

<!DOCTYPE html>
<html>
<head>
<style>
h1 {font-size: 50px;}
h2 {font-size: 30px;}
p {
  font-size: 15px;
  line-height: 20px;
}
</style>
</head>
<body>

<h1>Ini heading 1</h1>
<h2>Ini heading 2</h2>
<p>Ini sebuah paragraph.</p>
<p>Ini paragraph yang lain.</p>

</body>
</html>

Kode pt :

<!DOCTYPE html>
<html>
<head>
<style>
h1 {font-size: 50pt;}
h2 {font-size: 25pt;}
p {
  font-size: 15pt;
  line-height: 25pt;
}
</style>
</head>
<body>

<h1>Ini heading 1</h1>
<h2>Ini heading 2</h2>
<p>Ini sebuah paragraph.</p>
<p>Ini paragraph yang lain.</p>

</body>
</html>

Kode pc :

<!DOCTYPE html>
<html>
<head>
<style>
h1 {font-size: 4.5pc;}
h2 {font-size: 3pc;}
p {
  font-size: 1.5pc;
  line-height: 3pc;
}
</style>
</head>
<body>

<h1>Ini heading 1</h1>
<h2>Ini heading 2</h2>
<p>Ini sebuah paragraph.</p>
<p>Ini paragraph yang lain.</p>

</body>
</html>

Piksel (px) relatif terhadap perangkat tampilan. Untuk perangkat dengan dpi rendah, 1px adalah satu piksel perangkat (titik) dari tampilan. Untuk printer dan layar resolusi tinggi, 1px menyiratkan beberapa piksel perangkat.

Panjang Relatif

Satuan panjang relatif menentukan panjang relatif terhadap properti panjang lainnya. Unit panjang relatif berskala lebih baik di antara berbagai media rendering.

Unit	Deskripsi
em	Sehubungan dengan ukuran font elemen (2em berarti 2 kali ukuran font saat ini)
ex	Sehubungan dengan tinggi x font saat ini (jarang digunakan)
ch	Relatif dengan lebar “0” (nol)
rem	Sehubungan dengan ukuran font elemen root
vw	Relatif dengan 1% dari lebar viewport *
vh	Relatif dengan 1% tinggi viewport *
vmin	Relatif dengan 1% dimensi viewport * yang lebih kecil
vmax	Relatif dengan 1% dimensi viewport * yang lebih besar
%	Relatif dengan elemen induk

Kode em :

<!DOCTYPE html>
<html>
<head>
<style>
p {
  font-size: 16px;
  line-height: 2em;
}

div {
  font-size: 30px;
  border: 1px solid black;
}

span {
  font-size: 0.5em;
}
</style>
</head>
<body>

<p> Paragraf ini memiliki line-height: 2x16px = 32px. </p>
<p> Paragraf ini memiliki line-height: 2x16px = 32px. </p>
<p> Paragraf ini memiliki line-height: 2x16px = 32px. </p>
<div> Ukuran font dari elemen div diatur ke 30px. <span> Elemen span di dalam elemen div memiliki ukuran font 0,5em, yang sama dengan 0,5x30 = 15px </span>. </div>

</body>
</html>

Kode ex :

<!DOCTYPE html>
<html>
<head>
<style>
div {
  font-size: 30px;
  border: 1px solid black;
}

span {
  font-size: 1ex;
}
</style>
</head>
<body>

<div> Ukuran font dari elemen div diatur ke 30px. <span> Elemen span di dalam elemen div memiliki ukuran font 1ex </span>. </div>

</body>
</html>

Kode ch :

<!DOCTYPE html>
<html>
<head>
<style>
body {
  font-size:16px;
}

div {
  font-size: 3ch;
  border: 1px solid black;
}
</style>
</head>
<body>

<p> Ukuran font dokumen ini adalah 16px. </p>

<div> Ukuran font dari elemen div ini adalah 3ch. </div>

<p> Unit ch menyetel ukuran font relatif terhadap lebar karakter "0". </p>

</body>
</html>

Kode rem :

<!DOCTYPE html>
<html>
<head>
<style>
html {
  font-size:16px;
}

div {
  font-size: 3rem;
  border: 1px solid black;
}

#top-div {
  font-size: 2rem;
  border: 1px solid red;
}
</style>
</head>
<body>

<p> Ukuran font dokumen ini adalah 16px. </p>

<div id = "top-div">
Ukuran font dari elemen div ini adalah 2rem, yang berarti 2 x ukuran font browser.
<div> Ukuran font dari elemen div ini adalah 3rem. Ini juga menunjukkan bahwa itu tidak mewarisi dari ukuran font elemen induknya. </div>
</div>

<p> Unit rem menyetel ukuran font relatif terhadap ukuran font dasar browser, dan tidak akan mewarisi dari orang tuanya. </p>

</body>
</html>

Kode vw :

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  font-size: 20vw;
}
</style>
</head>
<body>

<h1>Hello</h1>

<p> Ubah ukuran lebar jendela browser untuk melihat bagaimana ukuran font h1 berubah. </p>
<p> 1vw = 1% dari lebar viewport. </p>
<p> Unit vw tidak didukung di IE8 dan sebelumnya. </p>

</body>
</html>

Kode vh :

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  font-size: 20vh;
}
</style>
</head>
<body>

<h1>Hello</h1>

<p> Ubah ukuran tinggi jendela browser untuk melihat bagaimana ukuran font h1 berubah. </p>
<p> 1vh = 1% dari tinggi viewport. </p>
<p> Unit vh tidak didukung di IE8 dan sebelumnya. </p>

</body>
</html>

Kode vmin:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  font-size: 15vmin;
}
</style>
</head>
<body>

<h1>Hello</h1>

<p> Ubah ukuran jendela browser (baik lebar dan tinggi) untuk melihat bagaimana ukuran font h1 berubah. </p>
<p> 1vmin = 1vw atau 1vh, mana saja yang lebih kecil. </p>

</body>
</html>

Kode vmax :

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  font-size: 15vmax;
}
</style>
</head>
<body>

<h1>Hello</h1>

<p> Ubah ukuran jendela browser (lebar dan tinggi) untuk melihat bagaimana ukuran font h1 berubah. </p>
<p> 1vmax = 1vw atau 1vh, mana saja yang lebih besar. </p>
<p> Unit vmax tidak didukung di Edge 15 dan yang lebih lama, juga tidak di Safari 6.1 dan yang lebih lama. </ p>

</body>
</html>

Kode % :

<!DOCTYPE html>
<html>
<head>
<style>
body {
 font-size:16px;
}

div {
  font-size: 150%;
  border: 1px solid black;
}

</style>
</head>
<body>

<p> Ukuran font dokumen ini adalah 16px. </p>

<div> Ukuran font dari elemen div ini adalah 150%. </div>

<p> Unit% menyetel ukuran fonta relatif terhadap ukuran font saat ini. </p>
</body>
</html>

Browser Pendukung

Angka-angka dalam tabel merupakan versi browser yang sepenuhnya mendukung unit length.

Length Unit	Chrome	Edge	Firefox	Safari	Opera
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

Unit di CSS: Contoh Satuan Panjang dan Angka

Panjang Absolut

Panjang Relatif

Browser Pendukung

Referensi Aural di CSS: Contoh dan Propertinya

Konverter PX ke EM di CSS: Plus Cara Menghitungnya

You may also like