word-spacing adalah salah satu property pada css, sedangkan fungsinya untuk mengatur jarak spasi antar kata
value word-spacing
berikut value word-spacing
- length/panjang angka dalam (px, em, in)
- normal
contoh property word-spacing dalam inline style
word-spacing:normal
word-spacing dengan value normal maksudnya ialah jarak spasi antar kata bernilai normal
contoh code
<div style="clear: both; background-color: lime;margin:5px; width: 500px; word-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
word-spacing:10px
word-spacing dengan value 10px maksudnya ialah spasi antar kata berjarak 10px
contoh code
<div style="clear: both; background-color: lime;margin:5px; width: 500px; word-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
word-spacing:15px
word-spacing dengan value 15px maksudnya ialah spasi antar kata berjarak 15px
contoh code
<div style="clear: both; background-color: lime;margin:5px; width: 500px; word-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
word-spacing:20px
word-spacing dengan value 20px maksudnya ialah spasi antar kata berjarak 20px
contoh code
<div style="clear: both; background-color: lime;margin:5px; width: 500px; word-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
word-spacing:30px
word-spacing dengan value 30px maksudnya ialah spasi antar kata berjarak 30px
contoh code
<div style="clear: both; background-color: lime;margin:5px; width: 500px; word-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 word-spacing dalam internal style kompleks
perhatikan code dibawah
<html>
<head>
<title>word-spacing css</title>
<meta content="indam url:http://www.indaam.com" name="author"/>
<style type="text/css">
body{background-color:pink;}
#misalword-spacing1{
word-spacing:normal;
}
#misalword-spacing2{
word-spacing:10px;
}
#misalword-spacing3{
word-spacing:20px;
}
#misalword-spacing4{
word-spacing:30px;
}
#misalword-spacing5{
word-spacing:40px;
}
#misalword-spacing6{
word-spacing:50px;
}
.anggapsebagaikotak{
clear:both;
background-color:white;
width:400px;
margin:20px;
padding:10px;
}
</style>
</head>
<body>
<div class="anggapsebagaikotak" id="misalword-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="misalword-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="misalword-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="misalword-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="misalword-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="misalword-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; word-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; word-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; word-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; word-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; word-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 contohword-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
Gan kalo mau ngasih jarak enter (kebawah) gimana?
kan bisa pakai tag br