9 Mei 2014

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 :)

4 komentar:

  1. Belum eksekusi, Om. :D
    Biasanya pke spasinya satu ajah.

    BalasHapus
    Balasan
    1. kebanyakan Blogger memang mengabaikan ini

      Hapus
  2. spasi 1,5 = one-5 (satu minus lima?)

    BalasHapus
    Balasan
    1. itu ga ngaruh yo ... itu hanya penamaan class saja
      misal kamu gantu class .satukomalima juga bisa :)

      Hapus

Populer Terbaru Komentar

Entri Terbaru

Komentar Terbaru

Creative Commons License
All contents by Iskael is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
Based on a work at Iskael.
Permissions beyond the scope of this license may be available at Iskael.
© 2013 Belajar Ngeblog bersama Iskael. All Right Reserved. Powered by Blogger. Iskael Template by Iskael. Submitted on TopBlogIndonesia