CSS fungsi Property Word-Spacing serta Valuenya

word-spacing adalah salah satu property pada css, sedangkan fungsinya untuk mengatur jarak spasi antar kata, valuenya bisa kita tentukan misal normal

Kita tidak bisa mengubah masa lalu. Kita tak bisa mengubah sesuatu yang tak bisa dihindari. Satu hal yang bisa kita lakukan adalah berpegang pada tali yang kita punya. Dan itu adalah perilaku yang benar. Charles R Swindoll

word-spacing adalah salah satu property pada css, sedangkan fungsinya untuk mengatur jarak spasi antar kata, valuenya bisa kita tentukan misal normal

Last Modif at July 10th, 2011

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
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
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
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
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
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.net" 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.net" 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

Indam

A geek, frontend developer. Like you, coding & experiment.
#web #design #ui #ux #standard #dreamer
#welding #interisti #beer #coffee

2 thoughts on “CSS fungsi Property Word-Spacing serta Valuenya”

  1. dido says:

    Gan kalo mau ngasih jarak enter (kebawah) gimana?

    1. indam says:

      kan bisa pakai tag br

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Disclaimer, FAQ & License

Hello Gaes, untuk tujuan apapun semua content text di blog ini dapat di copas, tanpa harus menulis sumbernya. Namun content yang berupa gambar--harus Anda periksa kembali lisensinya.

Adapun(mungkin) sebagian content blog ini sudah kadaluarsa atau sudah tidak relevan, contoh :'Theme default WordPress 3+ adalah Twentyten 'apakah selamanya Twentyten?' ngga kan? Indam selaku pengelolah berharap melaporkan jika menemukan content basi yang mungkin dapat menimbulkan salah persepsi tentang content dan konsep itu sendiri. Oia, karena blog ini bersifat pribadi dan bukan untuk komersil, mungkin anda juga akan menemukan tulisan tentang aku dan hal-hal rancu yang sama sekali ngga ada hubungan dengan web dan blog-blogan. Perlu dicatat: Indam selaku pengelolah tidak bertanggung jawab atas kerugian materi, waktu, tenaga, pikiran yang mungkin ditimbulkan dari sini. So, pandai-pandai yah dalam memilah informasi. Thanks for reading.

Quote

Ketika Anda melihat orang lain mengangkat dirinya dengan cara merendahkan orang lain, sebenarnya orang itu lebih rendah dari mereka yang direndahkan. Phidias--greece filsuf

+
-