Satuan ukuran in merupakan singkatan dari inches. Satuan in (inches) pada CSS dapat digunakan sebagai satuan yang baku dalam menetapkan ukuran bagi elemen HTML baik itu ukuran huruf (font size), panjang (width), tinggi (height) dan lainnya. Sebenarnya W3C (WWW Consortium) tidak begitu merekomendasikan ukuran in dalam menata halaman web, tapi merekomendasikan ukuran in hanya untuk proses mencetak dokumen pada mesin pencetak seperti printer.
Jika ukuran sebesar 1in ditetapkan dalam satuan px (pixels) maka akan setara dengan 96px. Dan 1in sama dengan 2.54cm atau 25.4mm.
Sintaks ukuran in (Inches) :
tipe_property: xin;
Nilai x adalah nilai dalam bentuk numeric (angka). Nilai x bisa dalam bentuk nilai desimal ataupun non-desimal.
Sebagai contoh :
font-size: 0.25in;
width: 1in;
height: 3.5in;
margin: 0.25in;
1in = 2.54cm = 25.4mm = 72pt = 6pc = 96px
Ukuran huruf atau font size dapat diatur ke dalam satuan in (inches). Namun nilai 1in adalah sangat besar yaitu setara dengan 96px, sedangkan normal huruf pada halaman web standartnya berukuran 16px. Jika ukuran dalam satuan in, untuk mendapatkan huruf dengan ukuran normal dapat menggunakan ukuran huruf sebesar 0.2in.
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
<title>Belajar Style Sheet Pada CSS</title>
</head>
<body>
<p style="font-size:0.05in;">Huruf ukuran 0.05in</p>
<p style="font-size:0.1in;">Huruf ukuran 0.1in</p>
<p style="font-size:0.15in;">Huruf ukuran 0.15in</p>
<p style="font-size:0.2in;">Huruf ukuran 0.2in</p>
<p style="font-size:0.25in;">Huruf ukuran 0.25in</p>
<p style="font-size:0.3in;">Huruf ukuran 0.3in</p>
<p style="font-size:0.35in;">Huruf ukuran 0.35in</p>
<p style="font-size:0.4in;">Huruf ukuran 0.4in</p>
<p style="font-size:0.45in;">Huruf ukuran 0.45in</p>
<p style="font-size:0.5in;">Huruf ukuran 0.5in</p>
<p style="font-size:0.55in;">Huruf ukuran 0.55in</p>
<p style="font-size:0.6in;">Huruf ukuran 0.6in</p>
<p style="font-size:0.65in;">Huruf ukuran 0.65in</p>
<p style="font-size:1.0in;">Huruf ukuran 1in</p>
</body>
</html>
Hasil Script :
Huruf ukuran 0.05in
Huruf ukuran 0.1in
Huruf ukuran 0.15in
Huruf ukuran 0.2in
Huruf ukuran 0.25in
Huruf ukuran 0.3in
Huruf ukuran 0.35in
Huruf ukuran 0.4in
Huruf ukuran 0.45in
Huruf ukuran 0.5in
Huruf ukuran 0.55in
Huruf ukuran 0.6in
Huruf ukuran 0.65in
Huruf ukuran 1in
Ukuran dalam bentuk tinggi dan lebar suatu elemen HTML juga dapat diatur ke dalam nilai satuan in (inches). Penggunaan nilai dalam satuan in (inches) juga harus mempertimbangkan aspek besaran ukuran nyata. Karena nilai 1in ukurannya begitu besar yaitu 2.54cm atau 96px. Anda dapat menggunakan nilai pecahan desimal untuk mendapatkan nilai yang mendekati ukuran sebenarnya.
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
<title>Belajar Style Sheet Pada CSS</title>
</head>
<body>
<p style="height:0.3in;width:1.5in;border:solid 0.05in green;">0.3in x 1.5in</p>
<p style="height:0.3in;width:1.75in;border:solid 0.05in green;">0.3in x 1.75in</p>
<p style="height:0.3in;width:2.0in;border:solid 0.05in cyan;">0.3in x 2.0in</p>
<p style="height:0.3in;width:2.25in;border:solid 0.05in cyan;">0.3in x 2.25in</p>
<p style="height:0.3in;width:2.5in;border:solid 0.05in cyan;">0.3in x 2.5in</p>
<p style="height:0.3in;width:2.75in;border:solid 0.05in cyan;">0.3in x 2.75in</p>
<p style="height:0.3in;width:3.0in;border:solid 0.05in blue;">0.3in x 3.0in</p>
<p style="height:0.3in;width:3.25in;border:solid 0.05in blue;">0.3in x 3.25in</p>
<p style="height:0.3in;width:3.5in;border:solid 0.05in blue;">0.3in x 3.5in</p>
<p style="height:0.3in;width:3.75in;border:solid 0.05in blue;">0.3in x 3.75in</p>
<p style="height:0.3in;width:4.0in;border:solid 0.05in magenta;">0.3in x 4.0in</p>
<p style="height:0.3in;width:4.25in;border:solid 0.05in magenta;">0.3in x 4.25in</p>
<p style="height:0.3in;width:4.5in;border:solid 0.05in magenta;">0.3in x 4.5in</p>
<p style="height:0.3in;width:4.75in;border:solid 0.05in magenta;">0.3in x 4.75in</p>
</body>
</html>
Hasil Script :
0.3in x 1.5in
0.3in x 1.75in
0.3in x 2.0in
0.3in x 2.25in
0.3in x 2.5in
0.3in x 2.75in
0.3in x 3.0in
0.3in x 3.25in
0.3in x 3.5in
0.3in x 3.75in
0.3in x 4.0in
0.3in x 4.25in
0.3in x 4.5in
0.3in x 4.75in
Tutorial CSS
Paling Banyak Dibaca
News Letters
Silahkan masukkan email Anda untuk berlangganan informasi kami
Previous Page
