Omadus line-height

Omadus line-height määrab teksti ridade vahelise intervalli (realtvahe).

Omadus ei määra teksti ridade vahelist vahemaad, nagu võib esmapilgul tunduda, vaid see määrab tekstirea kõrguse. See tähendab, et tegelik vahemaa ridade vahel arvutatakse järgmiselt: line-height - font-size = vahemaa tekstiridade vahel. Või vastupidi line-height = font-size + vahemaa tekstiridade vahel.

Süntaks

selektor {
	line-height: väärtus;
}

Väärtused

Omaduse väärtusteks on mis tahes mõõtühikud suuruste jaoks. Kui väärtus on määratud % -des, on realtvahe protsentides fondi suurusest.

Lisaks saab väärtuseks määrata mis tahes arvu, mis on suurem kui null. Sel juhul tõlgendatakse seda fondi suuruse kordajana. Näiteks, kui font-size väärtus on 20px, ja line-height on 1.5, siis see on sama, mis kirjutada line-height: 30px (20px * 1.5 = 30px).

Vaikimisi on omaduse väärtus normal, sel juhul valib brauser realtvahe automaatselt.

Näide

Selles näites on vahemaa tekstiridade vahel line-height - font-size = 38px - 18px = 20px:

<p>
	some long text
</p>

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

Näide

Vähendame vahemaad 25px - 18px = 7px:

<p>
	some long text
</p>

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

Näide

Selles näites on vahemaa tekstiridade vahel line-height - font-size = 18px - 18px = 0px - read praktiliselt kleepuvad kokku (ülemise rea tähtede sabad puudutavad alumise rea tähtede sabasid):

<p>
	some long text
</p>

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

Näide

Selles näites on väärtus line-height - kordaja 1.5 fondi suurusest. Seega on line-height ekvivalentne font-size * 1.5 = 18px * 1.5 = 27px. Ja tegelik vahemaa ridade vahel on line-height - font-size = 27px - 18px = 9px:

<p>
	some long text
</p>

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

Näide

Suurendame kordajat:

<p>
	some long text
</p>

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

Näide

Kui teha line-height väiksemaks kui font-size, siis read lahkuvad üksteise peale:

<p>
	some long text
</p>

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