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
1cm = 10mm = 0.394 in = 28.3pt = 37.7px
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
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
Tutorial CSS
Paling Banyak Dibaca
News Letters
Silahkan masukkan email Anda untuk berlangganan informasi kami
Previous Page
