Tutorial Belajar CSS: Cara Mengatur Tinggi Baris dalam Paragraf HTML (line-height)

Dalam tutorial CSS kali ini kita akan membahas tentang Cara Mengatur Tinggi Baris dalam Paragraf HTML. Tinggi baris atau besar "spasi paragraf" di dalam CSS diatur menggunakan property: line-height.


Mengatur Tinggi Baris dalam Paragraf dengan line-height

Yang dimaksud dengan tinggi baris dalam paragraf adalah besar jarak antara satu baris dengan baris di bawahnya. Dalam penggunaan sehari-hari kita menggunakan istilah "spasi paragraf" untuk hal ini. Misalnya agar tulisan skripsi menjadi lebih mudah dibaca, kita mengganti spasi (dalam aplikasi microsoft word) menjadi 1,5. Dibandingkan dengan jarak 1 spasi, pengaturan paragraf sebesar 1,5 spasi akan membuat jarak baris di dalam paragraf menjadi lebih "lega". Didalam CSS, pengaturan "besar spasi" ini ditangani dengan property line-height.

Nilai dari property line-height bisa diisi dengan nilai pixel, persen, em, atau angka (tanpa satuan). Berikut adalah contoh penulisannya:

p {
   line-height:16px;
}

Cara Perhitungan Nilai line-height

Jika nilai line-height ditetapkan dengan satuan pixel, perhitungan nilai line-height cukup sederhana. Untuk paragraf yang memiliki ukuran font (font-size) sebesar 14px, dan line-height sebesar 18px, maka jarak antar baris dihitung berdasarkan rumus berikut: 18px-14px. Hasil perhitungannya, yakni 4px adalah jarak antar baris yang dihasilkan. Jarak antar baris ini dikenal juga dengan istilah leading.

Bagaimana jika satuannya dicantumkan dalam persen atau em? Jika kita membuat line-height: 150% atau line-height: 1.5em pada teks yang berukuran 14px, maka line-height akan menjadi 150%*14px=21px. Sehingga jarak antar baris (leading) untuk contoh ini adalah 21px-14px=7px.

Selain satuan pixel, persen dan em, line-height juga memiliki satuan khusus yang digunakan untuk line-height, yaitu angka (tanpa satuan). Contoh penulisannya adalah sebagai berikut:

p {
   line-height:1.5;
}

Bagaimana perhitungan hasil leading dari penulisan line-height ini? Dalam kebanyakan kasus, line-height:1.5 akan menghasilkan nilai yang sama dengan line-height: 150%. Namun untuk kasus tag di dalam tag (nested tag) hasil yang didapat akan berbeda.

Misalkan kita membuat property line-height: 150% dan font-size: 14px pada tag <body>. Karena sifat line-height ini diturunkan ke dalam tag-tag lain (bersifat inherit) maka seluruh tag di dalam halaman HTML akan mendapatkan nilai line-height yang sama. Akan tetapi, nilai line-height yang diturunkan bukanlah line-height:150%, namun hasil perhitungannya, yakni line-height sebesar 21px (hasil dari 150%*14px).

Apabila di dalam halaman tersebut kita memiliki tag <p> dengan font-size sebesar 36 pixel, maka line height:21px akan membuat paragraf susah dibaca.

Dalam kasus ini, jika kita mengganti property line-height menjadi line-height:1.5 pada tag <body>, maka setiap tag dibawahnya akan mendapatkan nilai line-height:1.5. Sehingga untuk paragraf dengan font-size: 36px, efek turunan line-height:1.5 akan menghasilkan nilai line-height: 54px (hasil dari 150%*36).

Jika kita tidak mendefenisikan nilai line-height, maka web browser akan menggunakan nilai bawaan yang umumnya bernilai line-height:1.2.

Tutorial Mengatur Tinggi Baris Paragraf (line-height)

Sebagai contoh tutorial untuk property line-height yang telah kita bahas, berikut adalah kode HTML dan CSS dengan menggunakan berbagai nilai line-height:

<!DOCTYPE html>
<html>
<head>
<title>Belajar Tinggi Baris Paragraf CSS</title>
<style type="text/css">
   .contoh1 { font-size:16px; }
   .contoh2 { font-size:16px; line-height: 20px;}
   .contoh3 { font-size:16px; line-height: 1.5em;}
   .contoh4 { font-size:16px; line-height: 2;}
</style>
</head>
<body>
   <h2>Belajar Tinggi Baris CSS: line-height</h2>
  
   <h3>Font-size: 16px, tanpa line-height (nilai line-height: 1.2)</h3>
   <p class="contoh1">Lorem ipsum dolor sit amet, consectetur
   adipiscing elit. Nulla erat dolor, ullamcorper in ultricies
   eget,fermentum rhoncus leo. Curabitur eu mi vitae metus
   posuere laoreet. Eam facilis omittantur at, usu efficiantur
   neglegentur delicatissimi et, in per vero splendide
   persequeris.<p>
  
   <h3>Font-size: 16px, line-height: 20px</h3>
   <p class="contoh2">Lorem ipsum dolor sit amet, consectetur
   adipiscing elit. Nulla erat dolor, ullamcorper in ultricies
   eget,fermentum rhoncus leo. Curabitur eu mi vitae metus
   posuere laoreet. Eam facilis omittantur at, usu efficiantur
   neglegentur delicatissimi et, in per vero splendide
   persequeris.<p>
  
   <h3>Font-size: 16px, line-height: 1.5em</h3>
   <p class="contoh3">Lorem ipsum dolor sit amet, consectetur
   adipiscing elit. Nulla erat dolor, ullamcorper in ultricies
   eget,fermentum rhoncus leo. Curabitur eu mi vitae metus
   posuere laoreet. Eam facilis omittantur at, usu efficiantur
   neglegentur delicatissimi et, in per vero splendide
   persequeris.<p>
  
   <h3>Font-size: 16px, line-height: 2</h3>
   <p class="contoh4">Lorem ipsum dolor sit amet, consectetur
   adipiscing elit. Nulla erat dolor, ullamcorper in ultricies
   eget,fermentum rhoncus leo. Curabitur eu mi vitae metus
   posuere laoreet. Eam facilis omittantur at, usu efficiantur
   neglegentur delicatissimi et, in per vero splendide
   persequeris.<p>
</body>
</html>

Tutorial Belajar CSS - Contoh Cara Mengatur Tinggi Baris dalam Paragraf HTML (line-height)Dalam contoh diatas, saya membuat nilai line-height yang berbeda-beda untuk setiap paragraf. Untuk paragraf pertama, saya tidak mencantumkan nilai line-height, sehingga akan menggunakan nilai bawaan web browser.

Selain untuk mengatur tinggi baris dalam paragraf, property line-height sering juga digunakan untuk membuat text berada di tengah-tengah sebuah objek (vertical align). Misalkan kita memiliki kotak dengan tinggi 100px, dengan membuat nilai line-height: 100px, akan membuat text tampil di tengah-tengah kotak tersebut. Lebih jauh tentang hal ini akan kita bahas dalam pembahasan tutorial CSS tentang box model.

eBook CSS Uncover Duniailkom
Jika anda ingin belajar cara mendesain web, CSS wajib dikuasai. Duniailkom telah menyusun eBook CSS Uncover yang membahas CSS dengan lebih detail dan lebih lengkap, mulai dari dasar hingga fitur terbaru CSS3 seperti animasi dan web responsive. Penjelasan lebih lanjut bisa ke: eBook CSS Uncover Duniailkom.

29 Comments

  1. ProfHTML5
    24 Oct 14
    • Andre
      31 Oct 14
  2. AGUS
    19 Jun 15
  3. Nursyam Septiadi
    30 Jul 15
    • Andre
      11 Sep 15
  4. idbloginfo
    16 Aug 15
    • Andre
      11 Sep 15
  5. Jamal
    11 Sep 15
    • Andre
      11 Sep 15
  6. sutoro
    09 Oct 15
  7. arip
    22 Nov 15
  8. Ady
    25 Dec 15
  9. Aan Febriansah
    14 Apr 16
    • Andre
      16 Apr 16
  10. Ruth Bale
    12 Sep 16
    • Andre
      13 Sep 16
  11. Martinus
    15 Oct 16
  12. Anonymous
    09 Nov 16
  13. Adam
    13 Dec 16
    • Andre
      14 Dec 16
      • Adam
        14 Dec 16
  14. tugino
    04 Feb 17
  15. Rudhi Hadhi
    11 Mar 17
    • Andre
      12 Mar 17
  16. ReiksonPanjaitan
    11 Sep 18
    • Andre
      12 Sep 18
  17. Agus
    01 Mar 22
  18. Tahmid
    06 Nov 22

Add Comment