Apa fungsi line height pada css?

CSS

Tingi baris dalam sebuah paragraf adalah jarak antara satu baris dengan baris berikutnya. Lebih sederhananya bisa anda lihat baris paragraf ini dengan paragraf berikutnya. Dalam program microsoft word misalnya dikenal dengan istilah spasi, ada spasi 1,5 , ada spasi 1. Ini juga yang diterapkan dalam website. Sebagai media yang dibaca online, harus perhitungkan jarak antar baris, agar pembaca website tidak terlalu pusing dengan spasi yang terlalu rapat.
Mengatur spasi (berikutnya disebut line height) dalam CSS digunakan property line-height. Untuk value bisa digunakan angka dengan satuan pixel, persen , em atau angka saja. Sebagai contoh format penuilisa line-height ini bisa di lihat pada kode di bawah ini.

p { line-height:16px;}

Nilai line-height

Apabila diberikan value dalam satuan pixel, ini cukup mudah. Misalkan saja post memiliki ukuran huruf (font-size) 13px dan diberikan line-height sebesar 19 pixel. Jarak antara baris dalam suatu paragraf adalah 6px. Ini didapat dari line-height dikurangi font-size.

Apabila anda menggunakan persen/em maka di dapat hasil dari pengurangan font-size dengan persentase font-size. Contoh, bila menggunakan font-size 20px. Kemudian digunakan line-height 1.5em (atau ini sama dengan 150%). Maka ukuran line-height = 150%x20px = 30px. Lalu jarak antara baris akan menjadi 30px-20px =10px.

Ketika anda menuliskan angka saja tanpa satuan, maka browser akan membaca ini dalam %. Namun akan lebih disarankan jika anda mendefenisikan value line-height ini beserta satuannya saja. Jika tidak ditulis dalam CSS ukuran line-height maka browser akan mengunakan line height standar, yaitu 1.2.

Contoh Penulisan Mengatur line-height pada CSS

Sebagai contoh untuk anda, anda bisa menjalankan kode html di bawah ini.

<!DOCTYPE html>
<html>
<head>
<title>bahasa pemograman</title>
<style type="text/css">
.takadanilai { font-size:16px; }
.spasidalampx { font-size:16px; line-height: 25px;}
.spasidalamem { font-size:16px; line-height: 3em;}
.spasitanpasatuan { font-size:16px; line-height: 1;}
</style>
</head>
<body>
<h2>Mengatur Tinggi Baris CSS: line-height</h2>
<h3>Font-size: 16px, tanpa line-height (nilai line-height: default)</h3>
<p class="takadanilai">Jika dilihat dalam fungsi secara umum mungkin blog dan website sama saja. Untuk orang awam (contohnya saya) berpikiran blog dan website tersebut sama. Sama sama menampilkan sesuatu baik itu artikel, foto dan lain sebagainya. Setelah mencari dan mengikuti terjun langsung ke dunia blogging dan mencoba masuk ke dalam dunia blog. Ternyata ada perbedaan antara blog dan website. Apa saja beda blog dan website? Dari berbagai sumber berikut catatan yang saya rangkum.<p>

<h3>Font-size: 16px, line-height: 25px</h3>
   <p class="spasidalampx">Jika dilihat dalam fungsi secara umum mungkin blog dan website sama saja. Untuk orang awam (contohnya saya) berpikiran blog dan website tersebut sama. Sama sama menampilkan sesuatu baik itu artikel, foto dan lain sebagainya. Setelah mencari dan mengikuti terjun langsung ke dunia blogging dan mencoba masuk ke dalam dunia blog. Ternyata ada perbedaan antara blog dan website. Apa saja beda blog dan website? Dari berbagai sumber berikut catatan yang saya rangkum.<p>

<h3>Font-size: 16px, line-height: 3em</h3>
<p class="spasidalamem">Jika dilihat dalam fungsi secara umum mungkin blog dan website sama saja. Untuk orang awam (contohnya saya) berpikiran blog dan website tersebut sama. Sama sama menampilkan sesuatu baik itu artikel, foto dan lain sebagainya. Setelah mencari dan mengikuti terjun langsung ke dunia blogging dan mencoba masuk ke dalam dunia blog. Ternyata ada perbedaan antara blog dan website. Apa saja beda blog dan website? Dari berbagai sumber berikut catatan yang saya rangkum.<p>

<h3>Font-size: 16px, line-height: 1</h3>
   <p class="spasitanpasatuan">Jika dilihat dalam fungsi secara umum mungkin blog dan website sama saja. Untuk orang awam (contohnya saya) berpikiran blog dan website tersebut sama. Sama sama menampilkan sesuatu baik itu artikel, foto dan lain sebagainya. Setelah mencari dan mengikuti terjun langsung ke dunia blogging dan mencoba masuk ke dalam dunia blog. Ternyata ada perbedaan antara blog dan website. Apa saja beda blog dan website? Dari berbagai sumber berikut catatan yang saya rangkum.<p>
</body>
</html>

Dari tampilan kode yang dijalankan di atas anda bisa elihat perbedaannya masing masing. Terutama pada selector p yang tidak diberi apa apa. Maka paragraf ditampilkan secara default. Sementara untuk,yang lainnya bisa dicek sendiri beda jarak antara baris dalam halaman html anda tersebut.

Share Yuk