Kamis, 23 Februari 2017

CSS: Cara Mengatur Lebar (spasi) Antar Huruf dan Kata Teks HTML dengan CSS






Assalamu'alaikum wr.wb

Kali ini saya akan berbagi Cara Mengatur Lebar (spasi) Antar Huruf dan Kata Teks HTML dengan CSS.


Cara Mengatur Lebar Spasi Antar Huruf dengan CSS

Oroperti CSS letter-spacing digunakan untuk mengatur spasi atau jarak antar huruf. Nilai yang digunakan bisa berupa pixel, persen, em atau satuan ukuran text lainnya.

Jika kita memberikan nilai positif untuk letter-spacing, spasi antar karakter akan semakin menjauh. Untuk membuat spasi antar karakter semakin berdekatan, gunakan nilai negatif.

Contoh penulisan properti letter-spacing:
Nilai letter-spacing: normal bisa digunakan untuk membuat spasi antar karakter kembali ke nilai awal (nilai default).

Cara Mengatur Lebar (spasi) Antar Kata

Selain pengaturan spasi antar karakter, CSS juga menyediakan cara untuk mengatur jarak atau spasi antar kata dengan properti word-spacing. Sama seperti letter-spacing, kita bisa menggunakan nilai positif atau negatif untuk memperlebar atau memperkecil spasi antara sebuah kata dengan kata lainnya.

Contoh penulisan properti word-spacing:
Nilai word-spacing: normal bisa digunakan untuk membuat spasi antar kata kembali ke nilai awal (nilai default).

Tutorial Cara Mengatur Lebar Antar Huruf dan Kata

Contoh kode HTML dan CSS untuk penggunaan letter-spacing dan word-spacing:



Pehatikan contoh kita diatas, efek letter-spacing dan word-spacing yang terlalu berdekatan atau terlalu jauh akan membuat tulisan susah dibaca. Namun dengan mengkombinasikan efek ini dengan berbagai efek teks CSS lain, kita bisa membuat tampilan text yang lebih beragam.

Sekian Cara Mengatur Lebar (spasi) Antar Huruf dan Kata Teks HTML dengan CSS.
Semoga Bermanfaat...!!!

Wassalamu'alaikum wr.wb


EmoticonEmoticon