Skip to main content

B.4.1.8. Line Height

Mengatur jarak antar baris adalah salah satu kunci untuk kenyamanan membaca sebuah teks yang panjang.

Pada chapter ini kita akan membahas salah satu properti yang digunakan untuk membuat jarak antar baris pada suatu paragraf yaitu line-height. Dengan line-height, temen-temen bisa menyesuaikan jarak antar baris dengan menggunakan nilai numerik, satuan px, em, atau %.

Sebagai contoh kita mempunyai paragraf yang sangat panjang seperti:

Output

Kita bisa mengubah jarak antar baris pada gambar di atas dengan menggunakan properti line-height. Coba temen-temen perhatikan kode di bawah ini:

<p class="long-text">
  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odit provident dolor
  quae cupiditate tempore qui quidem unde rerum corrupti eius quam mollitia iure
  asperiores impedit at quos ullam, esse quibusdam velit enim, itaque aspernatur
  recusandae! Numquam expedita sint omnis tenetur provident ratione ullam porro
  animi illo esse blanditiis, sapiente iste? Id aperiam blanditiis accusamus
  est.
</p>

Nah sekarang coba kita lihat perbedaan dari style yang telah di terapkan.

Output

info

Source code pada chapter ini tersedia di GitHub
https://github.com/mframadann/webdev-dasar-example/tree/main/b-css/chapter-B.4-properti-css/B.4.1-text-styling/B.4.1.8-line-height