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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!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 ?
Semoga penjelasan diatas membantu pemahaman dalam pengaturan paragraf. Jika ada yang kurang jelas silahkan tulis di komentar di bagian bawah. Terima kasih banyak.
Muhammat Rasid Ridho
Software Developer yang Suka Jalan jalan, Belajar Jaringan dan Berbagi Cerita. Instagram: muhammat.rasid.ridho Jangan lupa tulis komentar di bawah ini ya teman teman ... !