Cara Mengatur Jarak Kata Menggunakan CSS

Pada saat ini kebutuhan dalam membuat website sangat beragam, demi memberi dampak dan kesan positif client tanpa mengurangi nilai esensi pada website dan pengalaman para pengunjung website.

Sebagai programmer, baik itu front end ataupun backend website, aplikasi berbasis android, ios ataupun aplikasi desktop dan komputer, ketelitian sangat dibutuhkan dengan menyangkut detail dari alur program, detail warna, bahkan sampai detail tampilan dan tata letak dan ukuran teks

Bagi teman-teman yang masih belajar tentang HTML CSS mungkin masih banyak properti css yang belum kalian ketahui baik itu fungsi ataupun cara penggunaannya. Contohnya saja di CSS ada properti yang digunakan untuk mengatur jarak antara kata satu dengan kata yang lainnya.

Untuk mengatur jarak antara satu kata dengan kata yang lainnya kalian bias menggunakan property word-spacing, berikut adalah contoh penggunaan property word-spacing:

Pertama kita buat struktur HTML seperti berikut:

 

<div class="container">
        <p>Cara memberikan jarak kata menggunakan CSS</p>
        <p class="wspc">Ini adalah paragraf yang diberikan word-spacing</p>
    </div>

 

Target penggunaan word-spacing kita adalah pada tag <p> yang memiliki class .wspc

Selanjutya kita akan membuat CSS nya seperti berikut

.container{
            width: 300px;
            margin: auto;
            background: #9ddb44;
            padding: 10px;
            font-family: arial
        }
        .container p {
            color:#777;
            font-weight: bold;
        }
        .container .wspc{
            background-color: green;
            color: white;
            padding: 1em;
            word-spacing: 2em;
        }

Sekarang coba kalian tampilkan di browser, maka hasilnya akan seperti ini.

contoh penggunaan word-spacing css

Pada contoh diatas terlihat sekali perbedaan antara paragraph yang diberikan property word-spacing dengan paragraph yang tidak diberikan property word-spacing.

Dalam penggunaanya biasa word-spacing sangat diperlukan pada desain portal berita pada saat menata kata-kata yang agar terlihat lebih presisi atau bahkan untuk portfolio yang memiliki desain unik sesuai dengan kreatifitas kalian.

Kalian juga bisa baca artikel yang berhubungan tentang mengatur letak text pada artikel yang berjudul penggunaan justify content pada flexbox

Baiklah teman-teman saya kira itu saya yang kita bahas mengenai cara mengatur jarak kata menggunakan CSS, sekarang tergantung kalian untuk menggunakan sesuai kreasi masing-masing.

17 Maret 2017

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat