letter-spacing adalah salah satu property pada css, sedangkan fungsinya untuk mengatur jarak antar huruf/text
value letter-spacing
berikut value letter-spacing
- length/panjang angka dalam (px, em, in)
- normal
contoh property letter-spacing dalam inline style
letter-spacing:normal
letter-spacing dengan value normal maksudnya ialah jarak antar huruf/text bernilai normal
contoh code
<div style="clear: both; background-color: lime;margin:5px; width: 500px; letter-spacing: normal;">
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
</div>
tampilan
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
letter-spacing:10px
letter-spacing dengan value 10px maksudnya ialah jarak antar huruf/text sebesar 10px
contoh code
<div style="clear: both; background-color: lime;margin:5px; width: 500px; letter-spacing: 10px;">
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
</div>
tampilan
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
letter-spacing:15px
letter-spacing dengan value 15px maksudnya ialah jarak antar huruf/text sebesar 15px
contoh code
<div style="clear: both; background-color: lime;margin:5px; width: 500px; letter-spacing: 15px;">
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
</div>
tampilan
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
letter-spacing:20px
letter-spacing dengan value 20px maksudnya ialah jarak antar huruf/text sebesar 20px
contoh code
<div style="clear: both; background-color: lime;margin:5px; width: 500px; letter-spacing: 20px;">
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
</div>
tampilan
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
letter-spacing:30px
letter-spacing dengan value 30px maksudnya ialah jarak antar huruf/text sebesar 30px
contoh code
<div style="clear: both; background-color: lime;margin:5px; width: 500px; letter-spacing: 30px;">
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
</div>
tampilan
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
contoh letter-spacing dalam internal style kompleks
perhatikan code dibawah
<html>
<head>
<title>letter-spacing css</title>
<meta content="indam url:http://www.indaam.com" name="author"/>
<style type="text/css">
body{background-color:pink;}
#misalletter-spacing1{
letter-spacing:normal;
}
#misalletter-spacing2{
letter-spacing:10px;
}
#misalletter-spacing3{
letter-spacing:20px;
}
#misalletter-spacing4{
letter-spacing:30px;
}
#misalletter-spacing5{
letter-spacing:40px;
}
#misalletter-spacing6{
letter-spacing:50px;
}
.anggapsebagaikotak{
clear:both;
background-color:white;
width:400px;
margin:20px;
padding:10px;
}
</style>
</head>
<body>
<div class="anggapsebagaikotak" id="misalletter-spacing1">
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
</div>
<div class="anggapsebagaikotak" id="misalletter-spacing2">
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
</div>
<div class="anggapsebagaikotak" id="misalletter-spacing3">
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
</div>
<div class="anggapsebagaikotak" id="misalletter-spacing4">
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
normal
</div>
<div class="anggapsebagaikotak" id="misalletter-spacing5">
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
</div>
<div class="anggapsebagaikotak" id="misalletter-spacing6">
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
</div>
<div style="clear: both; background-color: red;margin:5px; width: 500px; letter-spacing: normal;">
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
</div>
<div style="clear: both; background-color: red;margin:5px; width: 500px; letter-spacing:5px;">
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
</div>
<div style="clear: both; background-color: red;margin:5px; width: 500px; letter-spacing:10px;">
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
</div>
<div style="clear: both; background-color: red;margin:5px; width: 500px; letter-spacing:15px;">
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
</div>
<div style="clear: both; background-color: red;margin:5px; width: 500px; letter-spacing:20px;">
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
</div>
<div style="clear:both;"></div>
<p>salam <a href="http://www.indaam.com" title="indam site" target="_blank">indaam site</a></p>
</body>
</html>
untuk melihat hasilnya
- copy markup style diatas
- paste ke notepad
- save as (pilih all types) dengan nama contohletter-spacingcss.htm
- jalankan(double click), atau
- open with (firefox, ie, opera, safari, chrome)
- silakan edit valuenya
- letak valuenya antara : (titik dua) dan ;(titik koma)
- selamat belajar
semoga bermanfaat
Sorry, formulir komentar sedang dalam perbaikan