Home » CSS » Unit di CSS: Contoh Satuan Panjang dan Angka

Unit di CSS: Contoh Satuan Panjang dan Angka

by Hanifah Nurbaeti
by Hanifah Nurbaeti

Section Artikel

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.

UnitDeskripsi
cmcentimeters
mmmillimeters
in inches (1in = 96px = 2.54cm)
px *pixels (1px = 1/96th of 1in)
ptpoints (1pt = 1/72 of 1in)
pcpicas (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.

UnitDeskripsi
emSehubungan dengan ukuran font elemen (2em berarti 2 kali ukuran font saat ini)
exSehubungan dengan tinggi x font saat ini (jarang digunakan)
chRelatif dengan lebar “0” (nol)
remSehubungan dengan ukuran font elemen root
vwRelatif dengan 1% dari lebar viewport *
vhRelatif dengan 1% tinggi viewport *
vminRelatif dengan 1% dimensi viewport * yang lebih kecil
vmaxRelatif 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 UnitChromeEdgeFirefoxSafariOpera
em, ex, %, px, cm, mm, in, pt, pc1.03.01.01.03.5
ch27.09.01.07.020.0
rem4.09.03.64.111.6
vh, vw20.09.019.06.020.0
vmin20.012.019.06.020.0
vmax26.016.019.07.020.0

You may also like