Mengatur Jarak Antarbaris dengan CSS

Bagi pengguna Microsoft Word maupun Open Office sangatlah lazim dengan istilah "line-spacing". Line-spacing atau yang lebih nyaman disebut dengan jarak antarbaris sangat sering ditemui dalam penulisan naskah. Normalnya, jarak antarbaris yang digunakan bernilai 1.5 untuk bisa dibaca dengan mudah. Beberapa mensyaratkan untuk memakai jarak antarbaris double. Namun, keadaan awal biasanya bernilai single.

Baca juga: Mengatur Jarak Antarhuruf dengan CSS

Jika hal itu ada di aplikasi editor teks, tentu saja fitur ini ada di dalam CSS. Dalam membuat kontek blog bisa dibaca dengan nyaman adalah dengan memperhatikan jarak antar baris. Bayangkan jika jarak antarbaris terlalu dekat, maka tentu saja menyulitkan untuk dibaca. Berikut ini adalah cara mengatur jarak antarbaris dengan CSS.

Mengatur Jarak Antarbaris dengan CSS

Untuk memudahkan kamu memahami apa itu jarak antarbaris, di bawah ini adalah cuplikan teks yang saya tulis di aplikasi Open Office. Di gambar tersebut saya buat contoh jarak antarbaris single, 1.5, dan double.

Penggunaan Line-spacing pada Open Office

Sudah paham 'kan efek dari pengaturan jarak antarbaris? Berikut ini adalah contoh implementasi jarak antarbaris menggunakan CSS. Klik pada tab CSS untuk melihat kode CSS-nya.

See the Pen gsemJ by Iskandar Dzulkarnain (@iskael) on CodePen.

Untuk menghasilkan line-spacing "single", berikan nilai "line-height" yang sama dengan "font-size"-nya. Begitu pula dengan line-spacing 1.5, maka besar line-height = 1.5 x font-size. Berlaku juga untuk line-spacing double, triple, atau besaran lainnya. Mudah bukan? Selamat mencoba :)