Membuat Jarak Antar Baris dengan CSS

Hallo teman-teman, kali ini kita akan belajar bagaimana cara membuat jarak antar baris dengan CSS. Jika kalian sering menggunakan tag <p> untuk menulis artikel, maka artikel tersebut akan menjadi suatu paragraf. Namun kalian merasa bahwa jarak antar baris diparagraf tersebut terlalu dekat. Kalian bisa menggunakan fungsi line-height untuk memberikan jarak antar baris. Sehingga paragraf yang tadinya terlihat berdempetan bisa menjadi lebih luas. Fungsi ini bisa kalia terapkan pada file HTML kalian. Bagaimana cara menggunakan line-height tersebut kalian bisa ikut langkah-langkah dibawah ini. Pertama kalian buat file HTML seperti ini.

paragraf.html

<!DOCTYPE html>
<html>
<head>
<style>
p.kecil {
    line-height: 70%;
}

p.besar {
    line-height: 40px;
}
</style>
</head>
<body>

<p>
Ini adalah paragraf normal<br>
Ini adalah paragraf normal<br>
Ini adalah paragraf normal<br>
Ini adalah paragraf normal<br>
</p>

<p class="kecil">
Ini adalah paragraf kecil<br>
Ini adalah paragraf kecil<br>
Ini adalah paragraf kecil<br>
Ini adalah paragraf kecil<br>
</p>

<p class="besar">
Ini adalah paragraf besar<br>
Ini adalah paragraf besar<br>
Ini adalah paragraf besar<br>
Ini adalah paragraf besar<br>

</p>

</body>
</html>

Save kemudian kalian bisa lihat hasilnya pada browser kalian. Jika berhasil hasilnya akan seperti ini

Paragraf yang pertama adalah yang normalnya. Kemudian paragraf yang kedua adalah yang menggunakan fungsi line-height dengan nilai 70%. Artinya paragraf itu menjadi lebih rapat. Dan paragraf yang terakhir adalah dengan nilai line-height 40px. Artinya jarak antar baris paragraf tersebut sebanyak 40px, terlihat lebih renggang. Untuk nilai line-height itu sendiri bisa berupa satuan px ataupun %. Kalian bisa pilih sesuai kebutuhan. Mudah bukan ?

Sekian pembahasan mengenai cara membuat jarak antar baris dengan CSS. Semoga bermanfaat.