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

Posted on

Pada panduan CSS kali ini kita akan membahas mengenai Cara Mengatur Tinggi Baris dalam Paragraf HTML. Tinggi baris atau besar “spasi paragraf” di pada CSS diatur menggunakan property: line-height.


Mengatur Tinggi Baris pada Paragraf dengan line-height

Yang dimaksud dengan tinggi baris pada paragraf yaitu besar jarak antara satu baris dengan baris di bawahnya. Pada pemakaian sehari-hari kita menggunakan istilah “spasi paragraf” bagi hal ini. Misalnya agar tulisan skripsi menjadi lebih gampang dibaca, kita mengganti spasi (pada program microsoft word) menjadi 1,5. Dibandingi dengan jarak 1 spasi, pengaturan paragraf sebesar 1,5 spasi akan merancang jarak baris di pada paragraf menjadi lebih “lega”. Didalam CSS, pengaturan “besar spasi” ini ditangani dengan property line-height.

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


Cara Perhitungan Nilai line-height

Bila nilai line-height ditetapkan dengan satuan pixel, perhitungan nilai line-height lumayan sederhana. Bagi paragraf yang mempunyai ukuran font (font-size) sebesar 14px, dan line-height sebesar 18px, karenanya jarak antar baris dihitung merujuk pada rumus berikut: 18px-14px. Hasil perhitungannya, yakni 4px yaitu jarak antar baris yang didapatkan. Jarak antar baris ini dikenal pun dengan istilah leading.

Bagaimana sekiranya satuannya dicantumkan pada persen atau em? Bila kita merancang line-height: 150% atau line-height: 1.5em di teks yang berukuran 14px, karenanya line-height akan menjadi 150%*14px=21px. Sehingga jarak antar baris (leading) bagi contoh ini yaitu 21px-14px=7px.

Selain satuan pixel, persen dan em, line-height pun mempunyai satuan khusus yang digunakan bagi line-height, yaitu angka (tanpa satuan). Contoh penulisannya yaitu selaku berikut:

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

Misalkan kita merancang property line-height: 150% dan font-size: 14px di tag <body>. Karena sifat line-height ini diturunkan ke pada tag-tag lain (bersifat inherit) karenanya seluruh tag di pada halaman HTML akan memperoleh 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 pada halaman tersebut kita mempunyai tag <p> dengan font-size sebesar 36 pixel, karenanya line height:21px akan merancang paragraf susah dibaca.

Pada kasus ini, sekiranya kita mengganti property line-height menjadi line-height:1.5 di tag <body>, karenanya setiap tag dibawahnya akan memperoleh nilai line-height:1.5. Sehingga bagi paragraf dengan font-size: 36px, efek turunan line-height:1.5 akan menghasilkan nilai line-height: 54px (hasil dari 150%*36).

Bila kita tak mendefenisikan nilai line-height, karenanya web browser akan menggunakan nilai bawaan yang umumnya bernilai line-height:1.2.


Panduan Mengatur Tinggi Baris Paragraf (line-height)

Selaku contoh panduan bagi property line-height yang telah kita bahas, berikut yaitu kode HTML dan CSS dengan menggunakan pelbagai nilai line-height:

 Pada contoh diatas, saya merancang nilai line-height yang berbeda-beda bagi setiap paragraf. Bagi paragraf pertama-tama, saya tak mencantumkan nilai line-height, sehingga akan menggunakan nilai bawaan web browser.

Selain bagi mengatur tinggi baris pada paragraf, property line-height sering pun digunakan bagi merancang text berada di tengah-tengah sebuah objek (vertical align). Misalkan kita mempunyai kotak dengan tinggi 100px, dengan merancang nilai line-height: 100px, akan merancang text tampil di tengah-tengah kotak tersebut. Lebih jauh mengenai hal ini akan kita bahas pada pembahasan panduan CSS mengenai box model.


eBook CSS Uncover Duniailkom

Bila sahabat ingin belajar cara mendesain web, CSS wajib dikuasai. Duniailkom telah menyusun eBook CSS Uncover yang membahas CSS dengan lebih detail dan lebih komplit, mulai dari mendasar hingga fitur terbaru CSS3 seperti animasi dan web memiliki tampilan yang dinamis. Penjelasan lebih lanjut dapat ke: eBook CSS Uncover Duniailkom.


Sumber https://www.duniailkom.com/