Ciri line-height

Ciri line-height menetapkan jarak antara baris teks (jarak antara baris).

Ciri ini tidak menetapkan ruang antara baris teks seperti yang mungkin disangka, ia menetapkan ketinggian garisan teks. Ini bermakna ruang sebenar antara baris akan dikira seperti berikut: line-height - font-size = jarak antara baris teks. Atau sebaliknya line-height = font-size + jarak antara baris teks.

Sintaks

pemilih {
	line-height: nilai;
}

Nilai

Nilai untuk ciri ini adalah sebarang unit untuk saiz. Apabila nilai dinyatakan dalam %, jarak antara baris akan dalam peratusan daripada saiz fon.

Selain itu, anda boleh menetapkan nilai sebagai sebarang nombor lebih besar daripada sifar. Dalam kes ini, ia diterima sebagai pengganda daripada saiz fon. Contohnya, jika font-size mempunyai nilai 20px, dan line-height - 1.5, maka ini sama sahaja dengan menulis line-height: 30px (20px * 1.5 = 30px).

Secara lalai, ciri mempunyai nilai normal, dalam kes ini pelayar memilih jarak antara baris secara automatik.

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

Kurangkan ruang kepada 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 hampir melekat (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 - pengganda 1.5 daripada saiz fon. Oleh itu line-height akan setara dengan font-size * 1.5 = 18px * 1.5 = 27px. Dan ruang sebenar 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 pengganda:

<p>
	some long text
</p>

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

Contoh

Jika line-height dibuat kurang daripada font-size, maka baris akan bertindih antara satu sama lain:

<p>
	some long text
</p>

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