Свойство line-height

Свойство line-height матн сатрлари орасидаги интервални (матн сатри орасидаги интервални) белгилайди.

Свойство, кўриниб турганидек, матн сатрлари орасидаги бўшлиқни белгиламайди, балки матн сатрининг баландлигини белгилайди. Бу шунни англатадики, сатрлар орасидаги ҳақиқий бўшлиқ шундай ҳисобланади: line-height - font-size = матн сатрлари орасидаги масофа. Ёки акснинча line-height = font-size + сатрлар орасидаги масофа.

Синтаксис

селектор {
	line-height: қиймат;
}

Қийматлар

Свойство қиймати сифатида ҳар қандай ўлчов бирликлари хизмат қилади. Фоизда қиймат кўрсатилганда, сатр орасидаги интервал шрифт ҳажмидан фоизларда бўлади.

Бундан ташқари, нолдан катта бўлган ҳар қандай сонни қиймат сифатида белгилаш мумкин. Бу ҳолда у шрифт ҳажмидан кўпайтма сифатида қабул қилинади. Масалан, агар font-size қиймати 20px бўлса, line-height эса 1.5 бўлса, бу line-height: 30px деб ёзиш билан баробардир (20px * 1.5 = 30px).

Свойствонинг сунгги қиймати normal бўлиб, бу ҳолда браузер сатр орасидаги интервални автоматик равишда танлайди.

Мисол

Бу мисолда матн сатрлари орасидаги масофа line-height - font-size = 38px - 18px = 20px бўлади:

<p>
	some long text
</p>

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

Мисол

Бўшлиқни 25px - 18px = 7px гача кискартамиз:

<p>
	some long text
</p>

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

Мисол

Бу мисолда матн сатрлари орасидаги масофа line-height - font-size = 18px - 18px = 0px бўлади - сатрлар деярли бир-бирига япишиб qолади (юқори сатрдаги ҳарфларнинг думлари пастки сатрдаги ҳарфларнинг думларига тегиб кўриши мумкин):

<p>
	some long text
</p>

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

Мисол

Бу мисолда line-height қиймати - шрифт ҳажмидан 1.5 кўпайтмаси. Демак, line-height font-size * 1.5 = 18px * 1.5 = 27px га тенг бўлади. Сатрлар орасидаги ҳақиқий бўшлиқ эса line-height - font-size = 27px - 18px = 9px бўлади:

<p>
	some long text
</p>

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

Мисол

Кўпайтмани оширамиз:

<p>
	some long text
</p>

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

Мисол

Агар line-height ни font-size дан кичик қилсак, сатрлар умуман бир-бирини үстига чиқиб кетади:

<p>
	some long text
</p>

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