The line-heightharta mentakrifkan jumlah ruang atas dan di bawah elemen sebaris. Iaitu, elemen-elemen yang ditetapkan untuk display: inlineatau display: inline-block. Properti ini paling sering digunakan untuk menetapkan baris teks yang utama.
p ( line-height: 1.5; )Properti line-heightini dapat menerima nilai kata kunci normalatau nonebilangan, panjang, atau peratusan.
Menurut spesifikasi, nilai "normal" bukan hanya satu nilai konkrit yang diterapkan pada semua elemen, melainkan menghitung nilai "wajar" bergantung pada ukuran font yang ditetapkan (atau diwarisi) pada elemen tersebut.
Nilai panjang boleh ditentukan menggunakan unit CSS yang sah (px, em, rem, dll).
Nilai peratusan adalah ukuran fon elemen dikalikan dengan peratusan. Sebagai contoh:
Dalam demo di atas, ketiga-tiga perenggan tersebut mempunyai ketinggian baris masing-masing hingga 150%, 200%, dan 250%. Elemen badan mempunyai ukuran fon yang ditentukan pada 20px. Ini bermaksud ketinggian garis yang dihitung untuk perenggan masing-masing adalah 30px, 40px, dan 50px.
Ketinggian Talian Tanpa Unit
Metode yang disarankan untuk menentukan ketinggian garis adalah menggunakan nilai angka, disebut sebagai ketinggian garis "tanpa unit". Nilai nombor boleh berupa nombor apa pun, termasuk nombor berdasarkan perpuluhan, seperti yang digunakan dalam contoh kod pertama di halaman ini.
Ketinggian garis tanpa unit disyorkan kerana unsur anak akan mewarisi nilai nombor mentah, dan bukannya nilai yang dikira. Dengan ini, elemen anak dapat menghitung ketinggian baris berdasarkan ukuran fon yang dikira, dan bukannya mewarisi nilai sewenang-wenangnya daripada ibu bapa yang cenderung memerlukan penggantian.
Sokongan Penyemak Imbas
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Berfungsi | Berfungsi | Berfungsi | Berfungsi | Berfungsi | Berfungsi | Berfungsi |
IE6 / 7 akan salah mengira ketinggian garis pada elemen yang diganti (contohnya kawalan bentuk) yang sebaris.