Pada tutorial kali ini akan membahas bagaimana cara mengatur teks pada CSS menggunakan text spacing. Pengaturan text spacing pada CSS biasanya terdiri dari text indentation, letter spacing, line height, word spacing dan white spacing. Berikut akan dibahas lebih lanjut tentang cara penggunaan text spacing pada CSS.

Section Artikel

Text Indentation

Properti text-indent pada CSS digunakan untuk menentukan indentasi baris pertama teks, biasanya digunakan pada sebuah paragraf.

Contoh :

html>






  Dimasa muda dan masa rentanku, ayah memberiku nasihat yang terus aku pikirkan sejak saat itu. "Kapanpun kamu ingin mengkritik seseorang," katanya kepadaku, "ingatlah bahwa tidak setiap orang di dunia ini memiliki kelebihan seperti yang aku miliki."

Letter Spacing

Properti letter-spacing pada CSS berfungsi untuk menentukan spasi antar karakter dalam teks.

Berikut ini adalah contoh yang menunjukkan cara menambah atau mengurangi spasi antar karakter:

Ini adalah heading 1
Ini adalah heading 2

Line Height

Properti line-height pada CSS berfungsi untuk menentukan jarak antar baris perbaris. Agar lebih jelas berikut adalah contoh penerapannya.

Contoh :

Pragraf ini menggunakan jarak antar baris standar

Kebanyakan browser memiliki jarak antar baris default kira-kira 110%-120%.



class="small">
Paragraf ini menggunakan jarak antar baris lebih kecil.

Paragraf ini menggunakan jarak antar baris lebih kecil.




Paragraf ini menggunakan jarak antar baris lebih besar.

Paragraf ini menggunakan jarak antar baris lebih besar.

Word Spacing

Properti word-spacing pada CSS digunakan untuk menentukan spasi atau jarak antar kata dalam teks.

Berikut ini adalah contoh yang menunjukkan bagaimana cara menambah atau mengurangi jarak antar kata menggunakan word spacing kata:

Ini adalah heading 1
Ini adalah heading 2

White Spacing

Properti white-space pada CSS digunakan untuk menentukan bagaimana menangani elemen kosong (jarak enter) dalam sebuah kalimat.

Contoh di bawah ini akan menunjukkan cara menonaktifkan wrapping teks di dalam elemen, hapus properti white-space agar terlihat perbedaan antara paragraf yang menggunakan white-space dan tidak menggunakan white-space:

Hallo kawan-kawan, kali ini saya akan berbagi pengetahuan tentang Cara Mengatur Lebar Spasi Antar Huruf dengan CSS..

Sebelum membahas judul di atas , ini ada Sedikit kutipan atau Motivasi Buat kawan kawan semua..

"Pendidikan adalah senjata paling mematikan di dunia, karena itu, Anda mampu mengubah dunia"..

...

Langsung saja kita bahas tentang :

Cara Mengatur Lebar Spasi Antar Huruf dengan CSS

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

Berikut adalah contoh penulisan properti letter-spacing:

h1 {

   letter-spacing: 2px;

}

h2 {

   letter-spacing: -3px;

}

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.

Berikut adalah contoh penulisan properti word-spacing:

h1 {

   word-spacing: 20px;

}

h2 {

   word-spacing: -30px;

}

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

berikut adalah contoh kode HTML dan CSS untuk penggunaan letter-spacing dan word-spacing:

Belajar CSS: letter-spacing dan word-spacing

Sebuah kalimat dengan nilai letter-spacing negatif : -5px

Sebuah kalimat dengan nilai letter-spacing negatif: -1px

Sebuah kalimat dengan nilai letter-spacing positif: 1px

Sebuah kalimat dengan nilai letter-spacing positif: 5px

Sebuah kalimat dengan nilai word-spacing negatif: -5px

Sebuah kalimat dengan nilai word-spacing negatif: -1px

Sebuah kalimat dengan nilai word-spacing positif: 1px

Sebuah kalimat dengan nilai word-spacing positif: 5px

selamat mencoba 

" Demikianlah Artikel yang kami buat semoga bermanfaat bagi orang yang membacanya dan menambah wawasan bagi orang yang membaca artikel ini. Dan penulis mohon maaf apabila ada kesalahan dalam penulisan kata dan kalimat yang tidak jelas, mengerti, dan lugas mohon jangan dimasukan ke dalam hati.

Dan kami juga sangat mengharapkan yang membaca artikel ini akan bertambah motivasinya dan mengapai cita-cita yang di inginkan, karena saya membuat artikel ini mempunyai arti penting yang sangat mendalam.

Bagaimana cara menentukan jarak antar huruf?

Apa CSS property untuk mengatur jarak antar karakter?