Svojstvo line-height

Svojstvo line-height postavlja razmak između linija teksta (međulinijski razmak).

Svojstvo ne definiše prostor između linija teksta, kao što bi se moglo činiti, ono definiše visinu linije teksta. To znači da će se stvarni razmak između linija izračunati ovako: line-height - font-size = rastojanje između linija teksta. Ili obrnuto line-height = font-size + rastojanje između linija teksta.

Sintaksa

selektor {
	line-height: vrednost;
}

Vrednosti

Vrednost svojstva mogu biti bilo koje jedinice za veličine. Kada se vrednost navede u % međulinijski razmak će biti u procentima od veličine fonta.

Pored toga, vrednošću se može navesti bilo koji broj veći od nule. U tom slučaju se tumači kao množitelj veličine fonta. Na primer, ako font-size ima vrednost 20px, a line-height - 1.5, onda je to isto kao da ste napisali line-height: 30px (20px * 1.5 = 30px).

Podrazumevano svojstvo ima vrednost normal, u tom slučaju brauzer bira međulinijski razmak automatski.

Primer

U ovom primeru rastojanje između linija teksta će biti line-height - font-size = 38px - 18px = 20px:

<p>
	some long text
</p>

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

Primer

Smanjimo razmak na 25px - 18px = 7px:

<p>
	some long text
</p>

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

Primer

U ovom primeru rastojanje između linija teksta će biti line-height - font-size = 18px - 18px = 0px - linije će se praktično slepiti (nastavci slova gornje linije će se dodirivati sa nastavcima slova donje linije):

<p>
	some long text
</p>

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

Primer

U ovom primeru vrednost line-height je množitelj 1.5 veličine fonta. Prema tome line-height će biti ekvivalentno font-size * 1.5 = 18px * 1.5 = 27px. A stvarni razmak između linija će biti 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

Ako se napravi da je line-height manje od font-size, onda će se linije potpuno preklapati:

<p>
	some long text
</p>

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