The line-heightproperti mendefinisikan jumlah ruang atas dan di bawah elemen inline. Artinya, elemen yang ditetapkan ke display: inlineatau display: inline-block. Properti ini paling sering digunakan untuk mengatur awalan untuk baris teks.
p ( line-height: 1.5; )The line-heightproperti dapat menerima nilai-nilai kunci normalatau noneserta nomor, panjang, atau persentase.
Menurut spesifikasi, nilai "normal" bukan hanya nilai konkret tunggal yang diterapkan ke semua elemen, tetapi dihitung ke nilai "wajar" bergantung pada set ukuran font (atau diwariskan) pada elemen.
Nilai panjang dapat ditentukan menggunakan unit CSS yang valid (px, em, rem, dll).
Nilai persentase adalah ukuran font elemen dikalikan dengan persentase. Sebagai contoh:
Dalam demo di atas, ketinggian baris ketiga paragraf telah ditetapkan masing-masing ke 150%, 200%, dan 250%. Elemen body memiliki ukuran font yang ditentukan pada 20px. Ini berarti tinggi baris yang dihitung untuk paragraf masing-masing adalah 30px, 40px, dan 50px.
Ketinggian Jalur Tak Bersatuan
Metode yang direkomendasikan untuk menentukan tinggi garis menggunakan nilai angka, yang disebut sebagai tinggi garis “tanpa unit”. Nilai angka dapat berupa angka apa pun, termasuk angka berbasis desimal, seperti yang digunakan dalam contoh kode pertama di halaman ini.
Ketinggian baris tak bersatuan direkomendasikan karena fakta bahwa elemen turunan akan mewarisi nilai angka mentah, bukan nilai yang dihitung. Dengan ini, elemen turunan dapat menghitung tinggi baris mereka berdasarkan ukuran font yang dihitung, daripada mewarisi nilai arbitrer dari induk yang kemungkinan besar perlu diganti.
Dukungan Browser
| Chrome | Safari | Firefox | Opera | YAITU | Android | iOS |
|---|---|---|---|---|---|---|
| Bekerja | Bekerja | Bekerja | Bekerja | Bekerja | Bekerja | Bekerja |
IE6 / 7 akan salah menghitung ketinggian garis pada elemen yang diganti (misalnya kontrol bentuk) yang sebaris.