Cara Menggunakan Property CSS line-height

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

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

Property line-height digunakan secara luas untuk mengatur garis depan teks. Jika nilai tinggi baris lebih besar dari nilai ukuran font elemen, perbedaan antara nilai tinggi baris dan nilai ukuran font adalah teks terdepan. Bagian depan dipotong setengah (menghasilkan “setengah-depan”) 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 Property line-height lebih kecil dari nilai ukuran font, teks dapat meluap elemen, dan teks pada satu baris mungkin tumpang tindih teks pada baris lain di atas atau di bawahnya.

Sering kali nyaman untuk mengatur nilai tinggi garis pada properti steno font. Untuk melakukannya, lihat entri properti font untuk informasi lebih lanjut.

Property line-height dapat mengambil nilai kata kunci (normal), atau dapat diatur menggunakan angka, panjang, atau nilai persentase. Lihat bagian Nilai di bawah untuk informasi lebih lanjut tentang bagaimana masing-masing nilai dihitung.

Ketika mengambil nilai angka, dikatakan memiliki nilai “unitless”, yang biasanya lebih disukai daripada nilai unit. Kaskade garis-tinggi, dan karenanya turunan elemen akan mewarisi nilai yang dihitung dari induknya, dan nilai yang dihitung ini mungkin tidak cocok untuk ukuran font yang diterapkan padanya, dan Kalian mungkin berakhir dengan perilaku tak terduga.

Misalnya, jika elemen Kalian memiliki ukuran font yang ditetapkan ke 16px, dengan tinggi garis 120%. Nilai ketinggian garis yang dihitung adalah (16px * 120) / 100 = 19.2px. Jika elemen berisi elemen anak dengan ukuran font 24px, tinggi baris yang diwarisi oleh anak akan 19.2px, yang sangat kecil untuk ukuran font 24px, dan karenanya, seperti yang kami sebutkan 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 ukuran induknya. Jadi, dalam contoh kami, jika induk memiliki tinggi garis: 1.2, anaknya akan mewarisi nilai tinggi garis 1.2, yang akan dikalikan dengan ukuran font 24px untuk menghitung ruang antara baris teks & mdha; tidak ada teks yang akan overflow atau overlap.

Jadi, sebagai rekomendasi umum selalu lebih disukai untuk menggunakan ketinggian baris tanpa unit, karena jika tidak, Kalian mungkin akhirnya harus menimpa nilai berulang-ulang menuruni pohon sumber.

Official Syntax

line-height: normal | <number> | <length> | <percentage> | inherit

 

Contoh

Berikut ini menentukan ketinggian baris paragraf teks dan judul. Tinggi baris yang disarankan untuk paragraf adalah 1.4 dan untuk heading 1.2. Nilai-nilai ini umumnya memberikan pengalaman membaca yang baik

p {
    font-size: 20px;
    line-height: 1.4;
}
h1, h2, h3, h4, h5, h6 {
    line-height: 1.2;
}

DUMET School Author

DUMET School adalah tempat kursus website, kursus desain grafis, kursus digital marketing, kursus video editing dan kursus mobile apps terbaik di Jakarta dan Depok.

Leave a Reply

Your email address will not be published.