Cara Mengatur Jarak Kata Menggunakan CSS

17/03/2017    Maykhel David    6220    Website

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.

HTML CSS

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More
chatarrow