Lastnost line-height

Lastnost line-height določa razmik med vrsticami besedila (medvrstni razmik).

Lastnost ne določa prostora med vrsticami besedila, kot se morda zdi, ampak določa višino vrstice besedila. To pomeni, da bo dejanski razmik med vrsticami izračunan takole: line-height - font-size = razdalja med vrsticami besedila. Ali obratno line-height = font-size + razdalja med vrsticami besedila.

Sintaksa

selektor {
	line-height: vrednost;
}

Vrednosti

Vrednost lastnosti so lahko katere koli enote za velikosti. Če je vrednost podana v %, bo medvrstni razmik v odstotkih velikosti pisave.

Poleg tega je mogoče nastaviti katero koli število večje od nič. V tem primeru se razume kot množitelj velikosti pisave. Na primer, če ima font-size vrednost 20px, in line-height - 1.5, potem je to enako kot če bi napisali line-height: 30px (20px * 1.5 = 30px).

Privzeto ima lastnost vrednost normal, v tem primeru brskalnik samodejno izbere medvrstni razmik.

Primer

V tem primeru bo razdalja med vrsticami besedila line-height - font-size = 38px - 18px = 20px:

<p>
	some long text
</p>

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

Primer

Zmanjšajmo razmik na 25px - 18px = 7px:

<p>
	some long text
</p>

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

Primer

V tem primeru bo razdalja med vrsticami besedila line-height - font-size = 18px - 18px = 0px - vrstice se bodo praktično zlile (repki črk zgornje vrstice se bodo dotikali repkov črk spodnje):

<p>
	some long text
</p>

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

Primer

V tem primeru je vrednost line-height - množitelj 1.5 velikosti pisave. Posledično bo line-height enakovreden font-size * 1.5 = 18px * 1.5 = 27px. Dejanski razmik med vrsticami pa bo line-height - font-size = 27px - 18px = 9px:

<p>
	some long text
</p>

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

Primer

Povečajmo množitelj:

<p>
	some long text
</p>

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

Primer

Če naredimo line-height manjši od font-size, se bodo vrstice povsem prekrivale:

<p>
	some long text
</p>

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