Properti line-height digunakan untuk mengatur ketinggian kotak garis elemen. Ini menetapkan jarak antara dua garis dasar garis yang berdekatan.

Dengan kata lain, ini digunakan untuk mengatur jumlah ruang di atas dan di bawah elemen inline — elemen-elemen yang memiliki display: inline dan display: inline-block. Perbedaan antara tinggi konten dan tinggi garis yang ditentukan disebut “terkemuka”.

Properti line-height secara luas digunakan untuk mengatur garis depan teks. Jika nilai garis-tinggi lebih besar daripada nilai ukuran font suatu elemen, perbedaan antara nilai tinggi garis dan nilai ukuran font adalah teks utama. Terdepan terpotong setengah (menghasilkan “setengah terdepan”) dan didistribusikan di bagian atas dan bawah konten inline, sehingga elemen inline dipusatkan di dalam kotak garis (kecuali jika perataan diubah menggunakan properti perataan vertikal) .

Jika nilai properti garis-tinggi lebih kecil dari nilai ukuran font, teks mungkin meluap elemen, dan teks pada satu baris dapat tumpang tindih teks pada baris lain di atas atau di bawahnya.

Seringkali lebih mudah untuk mengatur nilai tinggi garis dalam properti font shorthand. Untuk melakukan itu, silakan lihat entri properti font untuk informasi lebih lanjut.

Properti garis-tinggi dapat mengambil nilai kata kunci (normal), atau dapat diatur menggunakan angka, panjang, atau nilai persentase. Lihat bagian Nilai di bawah ini untuk informasi lebih lanjut tentang bagaimana setiap nilai dihitung.

Ketika dibutuhkan nilai angka, dikatakan memiliki nilai “tanpa unit”, yang biasanya lebih disukai daripada nilai unit. Aliran ketinggian-baris, dan karena itu keturunan elemen akan mewarisi nilai yang dihitung dari induknya, dan nilai yang dihitung ini mungkin tidak cocok untuk ukuran font yang diterapkan pada mereka, dan kalian mungkin berakhir dengan perilaku tak terduga.

Misalnya, jika elemen kalian memiliki ukuran font disetel menjadi 16 piksel, dengan tinggi garis 120%. Nilai tinggi garis yang dihitung adalah (16px * 120) / 100 = 19.2px. Jika elemen berisi elemen anak dengan ukuran font 24px, tinggi garis yang diwariskan oleh anak adalah 19.2px, yang sangat kecil untuk ukuran font 24px, dan karenanya, seperti yang telah disebutkan sebelumnya, teks dari satu baris akan tumpang tindih teks dari baris lain (lihat bagian demo di bawah ini untuk contoh langsung). Jika elemen memiliki tinggi garis tanpa unit, anak akan mewarisi nilai tinggi garis itu sendiri, dan bukan nilai yang dihitung dari induknya, dan oleh karena itu nilai tinggi garisnya akan dihitung berdasarkan ukuran fontnya sendiri, bukan dari induknya. Jadi, dalam contoh kita, jika orang tua memiliki garis-tinggi: 1,2, anaknya akan mewarisi garis-tinggi nilai 1,2, yang akan dikalikan dengan ukuran huruf 24px untuk menghitung ruang antara garis teks & mdhas; tidak ada teks akan overflow atau tumpang tindih.

Jadi, sebagai rekomendasi umum selalu lebih disukai untuk menggunakan ketinggian garis tak berbatas, karena jika tidak, kalian mungkin harus mengganti nilai berulang kali di bawah pohon sumber.

Ketika properti line-height diterapkan untuk menggantikan elemen inline (seperti gambar, tombol, kolom input, textareas, dan objek pilih), itu seharusnya tidak berpengaruh sesuai dengan spesifikasi CSS. Namun, beberapa browser, memungkinkannya memiliki efek pada elemen-elemen semacam ini.

Jika properti line-height diterapkan untuk elemen inline yang tidak diganti (seperti rentang), itu menentukan ketinggian yang digunakan dalam perhitungan tinggi kotak garis.

Jika properti garis-tinggi digunakan pada elemen tingkat blok yang kontennya terdiri dari elemen tingkat-inline, itu menentukan tinggi minimal kotak garis di dalam elemen. Tinggi minimum terdiri dari tinggi minimum di atas garis dasar dan kedalaman minimum di bawahnya.