Mengatur jarak antar paragraf html

Question

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.

Table of Contents Show

Satuan panjang
sentimeter (cm)
Pengaturan Jarak Kata dan Baris
Apa CSS property untuk mengatur jarak antar baris?
Apakah elemen HTML yang benar untuk memberikan jarak antar kata?
Apa itu pada HTML?
Apa fungsi line height pada CSS?

Default

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

Ini adalah contoh elemen yang ditulis tanpa mengatur jarak antar baris

Normal

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

Berikut hasilnya:

Ini adalah contoh elemen yang ditulis dengan jarak antar baris bernilai "normal".

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.

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

Ini adalah contoh elemen yang ditulis dengan jarak antar baris sebesar 1.6 kali 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.

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

Ini adalah contoh elemen yang ditulis dengan jarak antar baris sebesar 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)

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

Ini adalah contoh elemen yang ditulis dengan jarak antar baris sebesar 1cm

Pixel (px)

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

Ini adalah contoh elemen yang ditulis dengan jarak antar baris sebesar 50px

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

Sekian, Semoga bermanfaat

Pengaturan Jarak Kata dan Baris

Kali ini kita akan mempelajari cara mengubah jarak baris dan jarak spasi antar kata pada tampilan HTML. Dua properti yang akan kita gunakan adalah word-spacing dan line-height. Word-spacing digunakan untuk menentukan spasi atau jarak antar kata. Sedangkan line-height digunakan untuk mengatur jarak antara tiap baris. Contoh kode CSS-nya lihat di bawah ini.

p{
    margin-bottom : 2px;
    margin-top : 2px;
}

.styleku{
    width : 300px;
    height : auto;
    background : yellow;
}

.styleku *{
    width : auto;
    height : auto;
    background : green;
}

.styleku1{
    line-height : 1;
    word-spacing : 1em;
}

.styleku2{
    line-height : 2;
    word-spacing : 2em;
}

.styleku3{
    line-height : 1;
    word-spacing : 2em;
}

.styleku4{
    line-height : 2;
    word-spacing : 1em;
}

Kode HTML-nya bisa kalian buat sendiri. Kalian juga bisa menggunakan kode HTML di bawah ini jika malas mengetik.

<HTML>
<HEAD>
    <TITLE>Belajar HTML</TITLE>
    <link rel="stylesheet" href="cssku.css">
</HEAD>
<BODY>
<h3>Belajar HTML</h3>
    <div class="styleku">
        <div class="styleku1">
            <p>Ini kalimat ke-1. Ini kalimat ke-2. Ini kalimat ke-3. Ini kalimat ke-4. Ini paragraf pertama.
            </p>
        </div>

        <div class="styleku2">
            <p>Ini kalimat ke-1. Ini kalimat ke-2. Ini kalimat ke-3. Ini kalimat ke-4. Ini paragraf pertama.
            </p>
        </div>

        <div class="styleku3">
            <p>Ini kalimat ke-1. Ini kalimat ke-2. Ini kalimat ke-3. Ini kalimat ke-4. Ini paragraf pertama.
            </p>
        </div>
  
        <div class="styleku4">
            <p>Ini kalimat ke-1. Ini kalimat ke-2. Ini kalimat ke-3. Ini kalimat ke-4. Ini paragraf pertama.
            </p>
        </div>
    </div>
</BODY>
</HTML>

Nilai-nilai yang bisa diberikan pada line-height dan word spacing, yaitu :

normal
initial
inherit
Panjang berupa angka dengan satuan px, cm, pt, em, dll.

Khusus untuk line-height, penulisan angka tanpa satuan bisa berarti kelipatan dari ukuran normal. Dalam hal ini, nilai 2 berbeda dengan 2px, 2cm, 2em, dan 2pt.

Tweet
Share
Share
Share

Apa CSS property untuk mengatur jarak antar baris?

Line height pada CSS merupakan properti yang digunakan untuk memberi ruang spasi dan jarak antara barisan teks yang satu dengan yang lainnya pada suatu paragraf. Properti ini akan memberikan kerapatan baris sesuai dengan nilai yang diberikan.

Apakah elemen HTML yang benar untuk memberikan jarak antar kata?

Cara Membuat Spasi di HTML.

Menggunakan   Ini merupakan salah satu cara membuat spasi di HTML. Menggunakan kode  . ... .

Menggunakan &ensp; Jika menggunakan kode   untuk membuat jarak antar kata menjadi dua spasi makan kita harus mengetikan kode sebanyak dua kali. ... .

Penggunaan &emsp;.

Apa itu pada HTML?

Tikkan   untuk menambahkan spasi di tempat yang Anda inginkan. Hasil kode ini dikenal sebagai non-breaking space atau spasi tetap karena mencegah pemisahan baris pada lokasi penempatan kode.