Cara Mengatur Jarak Antar Baris

Mengatur jarak antar baris tulisan penting untuk tulisan dapat dengan mudah dibaca oleh pengguna. Jarak antar baris tulisan ini dapat diatur dengan menggunakan CSS, berikut caranya.

Default

Berikut ini adalah jarak baris tulisan pada elemen yang normal dimana jarak antar baris tidak diatur.

Normal

Ukuran tinggi baris yang normal dapat diperoleh dengan membiarkannya default atau dengan mengatur property line-heigth menjadi normal seperti berikut.

.contoh{ line-height: normal; }

Berikut hasilnya:

Angka

Value pada property line-height dapat juga berisi sebuah angka. Angka tersebut berarti sekian kali ukuran normal. Misalnya anda menuliskan 1.6 pada value line-height maka jarak antar baris yang dihasilkan adalah 1.6 kali ukuran normal dari jarak antar baris.

.contoh{ line-height: 1.6; }

Berikut ini adalah contoh pengaturan jarak antar baris dimana nilai diatur menjadi 1.6 kali dari ukuran normal.

Persen (%)

Anda juga dapat menuliskan value dari property line-height berupa persen. Nilai persen ini, juga merupakan sekian kali dari ukuran normal jarak antar baris.

.contoh{ line-height: 200%; }

Berikut ini adalah contoh pengaturan jarak antar baris dimana nilai diatur menjadi 200% dari ukuran normal.

Satuan panjang

Anda juga dapat menuliskan ukuran jarak antar baris anda dalam satuan sentimeter (cm), pixel (px), dan sebagainya.

sentimeter (cm)

.contoh{ line-height: 1cm; }

Berikut ini adalah contoh pengaturan jarak antar baris dimana nilai diatur menjadi 1cm.

Pixel (px)

.contoh{ line-height: 50px; }

Berikut ini adalah contoh pengaturan jarak antar baris dimana nilai diatur menjadi 50px.

Lihat juga penggunaan animation-timing-function ini pada pembuatan animasi fade-in dan juga animasi pindah tempat

Sekian, Semoga bermanfaat