Properti line-height

Properti line-height mengatur jarak antara baris teks (jarak antar baris).

Properti tidak mengatur jarak antara baris teks, seperti yang mungkin terlihat, properti ini mengatur tinggi garis teks. Ini berarti bahwa jarak sebenarnya antara baris akan dihitung sebagai berikut: line-height - font-size = jarak antara baris teks. Atau sebaliknya line-height = font-size + jarak antara baris teks.

Sintaks

selektor {
	line-height: nilai;
}

Nilai

Nilai properti dapat berupa satuan untuk ukuran apa pun. Saat menentukan nilai dalam %, jarak antar baris akan dalam persentase dari ukuran font.

Selain itu, dapat ditentukan angka apa pun yang lebih besar dari nol. Dalam hal ini, angka tersebut dianggap sebagai pengali dari ukuran font. Misalnya, jika font-size memiliki nilai 20px, dan line-height - 1.5, maka ini sama dengan menulis line-height: 30px (20px * 1.5 = 30px).

Secara default, properti memiliki nilai normal, dalam hal ini browser memilih jarak antar baris secara otomatis.

Contoh

Dalam contoh ini, jarak antara baris teks akan menjadi line-height - font-size = 38px - 18px = 20px:

<p>
	some long text
</p>

p {
	font-size: 18px;
	line-height: 35px;
	text-align: justify;
}

Contoh

Kurangi jaraknya menjadi 25px - 18px = 7px:

<p>
	some long text
</p>

p {
	font-size: 18px;
	line-height: 25px;
	text-align: justify;
}

Contoh

Dalam contoh ini, jarak antara baris teks akan menjadi line-height - font-size = 18px - 18px = 0px - baris-baris hampir menyatu (ekor huruf baris atas akan menyentuh ekor huruf baris bawah):

<p>
	some long text
</p>

p {
	font-size: 18px;
	line-height: 18px;
	text-align: justify;
}

Contoh

Dalam contoh ini, nilai line-height - adalah pengali 1.5 dari ukuran font. Oleh karena itu, line-height akan setara dengan font-size * 1.5 = 18px * 1.5 = 27px. Dan jarak sebenarnya antara baris akan menjadi line-height - font-size = 27px - 18px = 9px:

<p>
	some long text
</p>

p {
	font-size: 18px;
	line-height: 1.5;
	text-align: justify;
}

Contoh

Tingkatkan pengalinya:

<p>
	some long text
</p>

p {
	font-size: 18px;
	line-height: 2.5;
	text-align: justify;
}

Contoh

Jika membuat line-height lebih kecil dari font-size, maka baris-baris akan saling tumpang tindih:

<p>
	some long text
</p>

p {
	font-size: 18px;
	line-height: 13px;
	text-align: justify;
}