Pada tutorial sebelumnya, kita sudah belajar tentang Tutorial Belajar CSS Bagian 48 : Cara Menggunakan Property Background Size di CSS. Pada tutorial ini kita akan belajar tentang cara menggunakan property line height di CSS untuk menentukan tinggi minimal kotak garis dalam elemen.
Properti line height CSS digunakan untuk menentukan tinggi minimal kotak garis dalam elemen. Ini menetapkan perbedaan antara dua baris konten Anda.
Ini mendefinisikan jumlah ruang di atas dan di bawah elemen sebaris. Ini memungkinkan Anda mengatur line height secara terpisah dari ukuran font.
Nilai line height CSS
Ada beberapa nilai properti yang digunakan dengan properti line height CSS.
| Nilai | Deskripsi |
| normal | Ini adalah nilai default. Ini menentukan ketinggian garis normal. |
| number | Ini menentukan angka yang dikalikan dengan ukuran font saat ini untuk mengatur line height. |
| lenght | Digunakan untuk mengatur line height dalam px, pt,cm, dll. |
| % | Ini menentukan line height dalam persentase font saat ini. |
| initial | Ini menetapkan properti ini ke nilai defaultnya. |
| inherit | Ini mewarisi properti ini dari elemen induknya. |
Contoh property line height CSS :
<!DOCTYPE html>
<html>
<head>
<style>
h3.small {
line-height: 70%;
}
h3.big {
line-height: 200%;
}
</style>
</head>
<body>
<h3>
Ini adalah judul dengan standar line-height.<br>
Ini adalah judul dengan standar line-height.<br>
Ketinggian garis default di sebagian besar browser adalah sekitar 110% hingga 120%.<br>
</h3>
<h3 class="small">
Ini adalah heading dengan line-height yang lebih kecil.<br>
Ini adalah heading dengan line-height yang lebih kecil.<br>
Ini adalah heading dengan line-height yang lebih kecil.<br>
Ini adalah heading dengan line-height yang lebih kecil.<br>
</h3>
<h3 class="big">
Ini adalah heading dengan line-height yang lebih besar.<br>
Ini adalah heading dengan line-height yang lebih besar.<br>
Ini adalah heading dengan line-height yang lebih besar.<br>
Ini adalah heading dengan line-height yang lebih besar.<br>
</h3>
</body>
</html> Semoga tutorial pembelajaran property line height ini membantu Anda untuk memahami cara menggunakan property line height dalam menentukan tinggi minimal kotak garis dalam elemen di website Anda.
0 Komentar