Mengatur jarak antar baris di html

Tinggi baris pada suatu paragraf merupakan besaran jarak antara baris pertama dengan baris selanjutnya di bawahnya. Tinggi baris sering disebut dengan leading yang berfungsi sebagai spasi dan jarak bagi teks di bawahnya agar mudah untuk dibaca. Paragraf standart normalnya memiliki spasi baris sebesar 1 spasi, namun untuk memudahkan dalam membacanya biasanya menggunakan spasi baris sebesar 1,5 spasi.

Line height pada CSS merupakan properti yang digunakan untuk memberi ruang spasi dan jarak antara barisan teks yang satu dengan yang lainnya pada suatu paragraf. Properti ini akan memberikan kerapatan baris sesuai dengan nilai yang diberikan. Nilai default tinggi baris paragraf pada CSS adalah 1,2 yang artinya tinggi baris tersebur memiliki nilai sebesar 1,2 kali dari nilai besar huruf (font-size) yang ditetapkan sebelumnya.

Satuan Ukuran Tinggi Baris

Nilai tinggi baris (line-height) aktual merupakan nilai tinggi baris suatu teks dalam paragraf dan sudah termasuk tinggi dari ukuran font-size di dalamnya. Jarak spasi di atas huruf dan jarak spasi di bawah huruf ditambah dengan ukuran font adalah nilai tinggi baris (line-height).

Penetapan ukuran tinggi baris dapat menggunakan satuan piksel (px), em, angka maupun dalam bentuk persentase (%).

line-height: normal | angka | persentase | px | inherit;

Sebagai contoh misalnya :

p {line-height: 1.5;}
p {line-height: 200%;}
p {line-height: 20px;}
p {line-height: normal;}

Nilai normal merupakan nilai untuk menetapkan tinggi baris dalam bentuk default yaitu sebesar 1,2 kali dari ukuran font-sizenya. Sedangkan nilai inherit merupakan nilai yang akan menetapkan tinggi baris sesuai dengan nilai elemen induknya (inheritance).

Tinggi Baris Dalam Satuan Piksel

Menetapkan tinggi baris dalam satuan pixel (px) merupakan penetapan nilai tinggi baris secara absolute. Nilainya sesuai dengan ukuran real besar nilai pixelnya dan tidak bergantung pada seberapa besar nilai pada ukuran hurufnya (font-size).

Misalnya jika satuan tinggi baris (line-height) sebesar 18px artinya, tinggi barisnya totalnya sebesar 18px dan di dalamnya sudah termasuk spasi di atas teks dan spasi di bawah teks beserta tinggi teks (font-size). Jika nilai font-sizenya adalah 14px, maka tinggi spasi di atas dan dibawah teks keduanya sebesar 2px. Namun jika nilai font-sizenya adalah 18px, maka tinggi spasi di atas dan dibawah teks keduanya sebesar 0px dan ini akan menyebabkan teks terlihat berhimpitan satu sama lainnya. Dan jika font-sizenya adalah 22px, maka tinggi spasi di atas dan dibawah teks keduanya sebesar -2px dan ini akan menyebabkan baris menjadi tumpang tindih (overlap) satu dengan yang lainnya.

Satuan piksel (px) memang bisa dipakai namun jarang digunakan. Hal ini karena satuan ini bersifat absolute dan harus mengetahui secara pasti nilai nyata dari font-sizenya.

Tinggi Baris Dalam Satuan Persentase, Em, Dan Angka

Penetapan tinggi baris dalam satuan persentase (%), em dan nilai angka merupakan penetapan tinggi baris secara relative dengan nilai besaran huruf (font-size) sebagai acuannya.

Misalnya suatu paragraf memiliki font-size sebesar 20px. Kemudian tinggi baris ditetapkan sebesar 200%, maka tinggi baris paragraf tersebut adalah 200 persennya dari ukuran huruf (font-size). Atau 200% dikali 20px sama dengan 40px. Spasi di atas teks dan dibawah teks dihitung sebesar 40px - 20px dibagi 2 yaitu masing - masing sebesar 10px.

Pada satuan em (em disini artinya besar huruf 'm' atau lebih mudahnya disebut dengan font-size saja), jika tinggi barisnya sebesar 2em artinya tinggi barisnya sebesar 2 kalinya huruf m (font-size). Maka tinggi barisnya menjadi 2 kalinya nilai m (font-size) atau 2 x 20px = 40px.

Pada satuan angka, jika tinggi barisnya sebesar angka 2 artinya tinggi barisnya sebesar 2 kalinya ukuran huruf (font-size) yang digunakan. Jika ditetapkan dengan angka 2, maka tinggi barisnya adalah 2 x 20px = 40px.

Satuan persentase (%), em dan nilai angka lebih sering digunakan dalam mendesain halaman web. Hal ini karena penetapan ukurannya secara relative. Dan walapun tidak diketahui berapa besar ukuran font-sizenya, tinggi barisnya cukup dengan membandingkan berapa kali ukuran dari real font-sizenya.

Mengatur Tinggi Baris Pada Paragraf

Pemberian ruang (spasi) dan jarak pada properti line height akan memberikan ruang bernafas bagi tulisan dan juga bagi mata. Jika tulisan antara baris satu dengan lainnya terlalu rapat akan membuat tulisan tersebut susah untuk dibaca.

Berikut pengaturan line height dalam satuan piksel (px) dengan beberapa variasi nilai di dalamnya :

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

<!DOCTYPE html>
<html>
<head>
<title>Line Height</title>
<style>
   p{
     font-size:16px;
     color:teal;
     border:solid 1px blue;
     padding:0px;
   }
</style>
</head>
<body>
   <h3>line-height: normal</h3>
   <p style="line-height:normal;">Money is  not everything, but everything needs money. Kindness makes you the most beatifull person in the world, no matter what you look like.</p>
      <h3>line-height: 16px</h3>
   <p style="line-height:16px;">Money is  not everything, but everything needs money. Kindness makes you the most beatifull person in the world, no matter what you look like.</p>
      <h3>line-height: 24px</h3>
   <p style="line-height:24px;">Money is  not everything, but everything needs money. Kindness makes you the most beatifull person in the world, no matter what you look like.</p>
      <h3>line-height: 34px</h3>
   <p style="line-height:34px;">Money is  not everything, but everything needs money. Kindness makes you the most beatifull person in the world, no matter what you look like.</p>
</body>
</html>

Berikut pengaturan line height dalam satuan persentase (%) dengan beberapa variasi nilai di dalamnya :

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

<!DOCTYPE html>
<html>
<head>
<title>Line Height</title>
<style>
   p{
     font-size:16px;
     color:teal;
     border:solid 1px blue;
     padding:0px;
   }
</style>
</head>
<body>
   <h3>line-height: normal</h3>
   <p style="line-height:normal;">Money is  not everything, but everything needs money. Kindness makes you the most beatifull person in the world, no matter what you look like.</p>
      <h3>line-height: 100%</h3>
   <p style="line-height:100%;">Money is  not everything, but everything needs money. Kindness makes you the most beatifull person in the world, no matter what you look like.</p>
      <h3>line-height: 150%</h3>
   <p style="line-height:150%;">Money is  not everything, but everything needs money. Kindness makes you the most beatifull person in the world, no matter what you look like.</p>



      <h3>line-height: 200%</h3>
   <p style="line-height:200%;">Money is not everything, but everything needs money. Kindness makes you the most beatifull person in the world, no matter what you look like.</p>
</body>
</html>

Berikut pengaturan line height dalam satuan em dengan beberapa variasi nilai di dalamnya :

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

<!DOCTYPE html>
<html>
<head>
<title>Line Height</title>
<style>
   p{
     font-size:16px;
     color:teal;
     border:solid 1px blue;
     padding:0px;
   }
</style>
</head>
<body>
   <h3>line-height: normal</h3>
   <p style="line-height:normal;">Money is  not everything, but everything needs money. Kindness makes you the most beatifull person in the world, no matter what you look like.</p>
      <h3>line-height: 1em</h3>
   <p style="line-height:1em;">Money is  not everything, but everything needs money. Kindness makes you the most beatifull person in the world, no matter what you look like.</p>
      <h3>line-height: 5em</h3>
   <p style="line-height:5em;">Money is  not everything, but everything needs money. Kindness makes you the most beatifull person in the world, no matter what you look like.</p>
      <h3>line-height: 2em</h3>
   <p style="line-height:2em;">Money is  not everything, but everything needs money. Kindness makes you the most beatifull person in the world, no matter what you look like.</p>
</body>
</html>

Berikut pengaturan line height dalam satuan angka dengan variasi nilai di dalamnya :

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

<!DOCTYPE html>
<html>
<head>
<title>Line Height</title>
<style>
   p{
     font-size:16px;
     color:teal;
     border:solid 1px blue;
     padding:0px;
   }
</style>
</head>
<body>
   <h3>line-height: normal</h3>
   <p style="line-height:normal;">Money is  not everything, but everything needs money. Kindness makes you the most beatifull person in the world, no matter what you look like.</p>
      <h3>line-height: 1</h3>
   <p style="line-height:1em;">Money is  not everything, but everything needs money. Kindness makes you the most beatifull person in the world, no matter what you look like.</p>
      <h3>line-height: 5</h3>
   <p style="line-height:5;">Money is  not everything, but everything needs money. Kindness makes you the most beatifull person in the world, no matter what you look like.</p>
      <h3>line-height: 2</h3>
   <p style="line-height:2;">Money is  not everything, but everything needs money. Kindness makes you the most beatifull person in the world, no matter what you look like.</p>
</body>
</html>

Apa CSS property untuk mengatur jarak antar baris?

Apakah elemen HTML yang benar untuk memberikan jarak antar kata?

Apa itu   pada HTML?

Apa fungsi line height pada CSS?