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 unit
Contoh 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 menggunakan 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 unit
Contoh 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
|
Sep abis kk..
ReplyDeleteSaya pake theme Minima, kode apa yang harus diubah agar spasi antar baris di postingan tidak terlalu jauh?
ReplyDeleteBingung banget..memahaminya...insyaallah nanti ndak bingung lagi law dah pandai
ReplyDeletesipp bosss. lengkap sekali
ReplyDeleteOke masbro, siap untuk dipraktekkan. Makasih
ReplyDeleteAwesome!!
ReplyDeleteVery nice tips.
Izin praktek Boss ....
thanks ya wah mnambah wawasan
ReplyDeleteMaturnuwun sharingnya, ship bisa buat memperbaiki tampilan webku
ReplyDeletesangat bermanfaat. matur nuwon kang
ReplyDeleteCara pake,buka dimana Bos
ReplyDeleteBelum bisa cara buka dimana ?
ReplyDelete