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.