Some text some message..
Some text some message..
Some text some message..
Some text some message..
  • Beranda
  • »
  • CSS
  • »
  • Satuan Ukuran cm (Centimeter) Pada CSS

Satuan Ukuran cm (Centimeter) Pada CSS

previous Previous Page

Satuan cm adalah singkatan dari centimeter. Satuan cm pada CSS merupakan satuan absolute yang memiliki nilai mutlak yang dapat digunakan untuk menentukan ukuran elemen HTML. Walaupun di dalam membangun aplikasi berbasis web satuan ini jarang digunakan, namun satuan cm dapat berjalan baik dan didukung oleh hampir semua browser. W3 (WWW Consortium) tidak merekomendasikan satuan cm sebagai tampilan pada perangkat layar (screen), namun lebih merekomendaikannya sebagai satuan untuk mencetak dokumen seperti printer.

Jika suatu elemen HTML memiliki satuan 1cm artinya nilai satuannya sama dengan 10mm (millimeter) atau 0.394in (inches).

Sintaks ukuran cm (centimeter) :

tipe_property: xcm;

Nilai x adalah nilai dalam bentuk numeric (angka). Nilai x bisa dalam bentuk nilai desimal ataupun non-desimal.

Sebagai contoh :

font-size: 1.5cm;
width: 10cm;
height: 1cm;
margin: 0.5cm;
padding: 0.5cm

Hubungan antara cm, mm,in, pt, dan px

1cm = 10mm = 0.394 in = 28.3pt = 37.7px

Menggunakan Satuan cm (Centimeter) Pada Ukuran Huruf

Satuan cm merupakan satuan dengan ukuran menengah dan dapat digunakan tanpa harus menggunakan pecahan desimal. Namun penggunaan pecahan desimal kadang diperlukan saat nilai yang diperoleh tidak sesuai dengan keinginan.

Pada ukuran huruf (font size), nilai 1cm setara dengan 37.7px. Untuk mendapatkan nilai default standart ukuran font sebesar 16px, maka nilai satuannya dapat diatur sebesar 0.42cm.

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
   <title>Belajar Style Sheet Pada CSS</title>
</head>
<body>
   <p style="font-size:0.1cm;">Huruf ukuran 0.1cm</p>
   <p style="font-size:0.2cm;">Huruf ukuran 0.2cm</p>
   <p style="font-size:0.3cm;">Huruf ukuran 0.3cm</p>
   <p style="font-size:0.4cm;">Huruf ukuran 0.4cm</p>
   <p style="font-size:0.5cm;">Huruf ukuran 0.5cm</p>
   <p style="font-size:0.6cm;">Huruf ukuran 0.6cm</p>
   <p style="font-size:0.7cm;">Huruf ukuran 0.7cm</p>
   <p style="font-size:0.8cm;">Huruf ukuran 0.8cm</p>
   <p style="font-size:0.9cm;">Huruf ukuran 0.9cm</p>
   <p style="font-size:1cm;">Huruf ukuran 1cm</p>
   <p style="font-size:1.25cm;">Huruf ukuran 1.25cm</p>
   <p style="font-size:1.5cm;">Huruf ukuran 1.5cm</p>
</body>
</html>

Hasil Script :

Huruf ukuran 0.1cm

Huruf ukuran 0.2cm

Huruf ukuran 0.3cm

Huruf ukuran 0.4cm

Huruf ukuran 0.5cm

Huruf ukuran 0.6cm

Huruf ukuran 0.7cm

Huruf ukuran 0.8cm

Huruf ukuran 0.9cm

Huruf ukuran 1cm

Huruf ukuran 1.25cm

Huruf ukuran 1.5cm

Menggunakan Satuan cm (Centimeter) Pada Tinggi Dan Lebar Elemen HTML

Satuan cm (centimeter) dapat digunakan pada elemen HTML yang memiliki dimensi tinggi dan lebar. Dimensi tinggi dan lebar suatu elemen akan terlihat jelas saat properti border dari elemen tersebut diatur dalam bentuk solid.

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
   <title>Belajar Style Sheet Pada CSS</title>
</head>
<body>
   <p style="height:0.7cm;width:3cm;border:solid 0.1cm #00c897;">0.7cm x 3cm</p>
   <p style="height:0.7cm;width:4cm;border:solid 0.1cm #00c897;">0.7cm x 4cm</p>
   <p style="height:0.7cm;width:5cm;border:solid 0.1cm #00c897;">0.7cm x 5cm</p>
   <p style="height:0.7cm;width:6cm;border:solid 0.1cm #00c897;">0.7cm x 6cm</p>
   <p style="height:0.7cm;width:7cm;border:solid 0.1cm #00c897;">0.7cm x 7cm</p>
   <p style="height:0.7cm;width:8cm;border:solid 0.1cm #00c897;">0.7cm x 8cm</p>
   <p style="height:0.7cm;width:9cm;border:solid 0.1cm #00c897;">0.7cm x 9cm</p>
   <p style="height:0.7cm;width:10cm;border:solid 0.1cm #00c897;">0.7cm x 10cm</p>
   <p style="height:0.7cm;width:11cm;border:solid 0.1cm #00c897;">0.7cm x 11cm</p>
   <p style="height:0.7cm;width:12cm;border:solid 0.1cm #00c897;">0.7cm x 12cm</p>
</body>
</html>

Hasil Script :

0.7cm x 3cm

0.7cm x 4cm

0.7cm x 5cm

0.7cm x 6cm

0.7cm x 7cm

0.7cm x 8cm

0.7cm x 9cm

0.7cm x 10cm

0.7cm x 11cm

0.7cm x 12cm

facebooktwitterwhatapplinkedinpinterest

previous Previous Page

Tutorial CSS

News Letters

Silahkan masukkan email Anda untuk berlangganan informasi kami