Adanya kode CSS memungkinkan kita untuk mengatur jarak spasi antar karakter , spasi antar kata dan spasi antar baris dengan sangat mudah. Kalau kita ingin membuat jarak spasi yang lain daripada yang lain, maka kode CSS menjadi salah satu alternatifnya.
Property yang kita gunakan ialah :
- letter-spacing ( untuk mengatur spasi antar karakter )
- line-height ( untuk mengatur spasi antar baris )
- word-spacing ( untuk mengatur spasi antar kata )
CSS letter-spacingProperty letter-spacing mempunyai dua nilai (value) yaitu
- normal (default)
- panjang (memberikan jarak yang pasti)
lihat css unitContoh kode CSS untuk mengatur spasi antar karakter:
<html>
<head>
<style type="text/css">
h1 {letter-spacing: -2px}
h3 {letter-spacing: 0.5cm}
</style>
</head>
<body>
<h1>Header 1 menggunakan spasi = -2 piksel </h1>
<h3>Header 3 menggunakan spasi = 0.5 centi meter </h3>
</body>
</html> |
Contoh Tampilan:
Header 1 menggunakan spasi = -2
piksel
Header 3 meng
gunakan spasi =
0.5 centi meter
|
CSS line-heightProperty line-height mempunyai empat nilai (value) yaitu
- normal (default)
- angka ( angka ini akan dikalikan ukuran huruf yang berlaku)
- panjang (memberikan jarak yang pasti)
lihat css unit- % (prosentase dari ukuran huruf yang berlaku)
Contoh kode CSS untuk mengatur spasi antar baris:
<html>
<head>
<style type="text/css">
p.rapet {line-height: 90%}
p.renggang {line-height: 2em}
p.panjang {line-height: 5}
</style>
</head>
<body>
<p>Paragrap dengan jarak spasi antar baris normal.
Paragrap dengan jarak spasi antar baris normal.
Paragrap dengan jarak spasi antar baris normal.
</p>
<p class="rapet">
Paragrap dengan jarak spasi antar barisnya rapet.
Paragrap dengan jarak spasi antar barisnya rapet.
Paragrap dengan jarak spasi antar barisnya rapet.
</p>
<p class="renggang">
Paragrap dengan jarak spasi antar barisnya renggang.
Paragrap dengan jarak spasi antar barisnya renggang.
Paragrap dengan jarak spasi antar barisnya renggang.
</p>
<p class="panjang">
Paragrap dengan jarak spasi sangat renggang.
Paragrap dengan jarak spasi sangat renggang.
Paragrap dengan jarak spasi sangat renggang.
</p>
</body>
</html> |
Contoh Tampilan:
Paragrap dengan jarak spasi antar baris normal.
Paragrap dengan jarak spasi antar baris normal.
Paragrap dengan jarak spasi antar baris normal.
Paragrap dengan jarak spasi antar barisnya rapet.
Paragrap dengan jarak spasi antar barisnya rapet.
Paragrap dengan jarak spasi antar barisnya rapet.
Paragrap dengan jarak spasi antar barisnya renggang.
Paragrap dengan jarak spasi antar barisnya renggang.
Paragrap dengan jarak spasi antar barisnya renggang.
Paragrap dengan jarak spasi sangat renggang.
Paragrap dengan jarak spasi sangat renggang.
Paragrap dengan jarak spasi sangat renggang.
|
CSS word-spacingProperty letter-spacing mempunyai dua nilai (value) yaitu
- normal (default)
- panjang (memberikan jarak yang pasti)
lihat css unitContoh kode CSS untuk mengatur spasi antar kata:
<html>
<head>
<style type="text/css">
p
{
word-spacing: 1cm
}
</style>
</head>
<body>
<p>Paragrap ini menggunakan spasi antar kata 1 cm</p>
</body>
</html> |
Contoh Tampilan:
Paragrap ini menggunakan spasi antar
kata 1 cm
|
Leave a comment