Eigenschap line-height

De eigenschap line-height stelt de afstand tussen tekstregels in (regelafstand).

De eigenschap specificeert niet de ruimte tussen tekstregels, zoals het misschien lijkt, het specificeert de regelhoogte van tekst. Dit betekent dat de werkelijke ruimte tussen regels zal worden berekend als: line-height - font-size = afstand tussen tekstregels. Of omgekeerd line-height = font-size + afstand tussen tekstregels.

Syntaxis

selector {
	line-height: waarde;
}

Waarden

De waarde van de eigenschap kan elke eenheid voor afmetingen zijn. Bij het opgeven van een waarde in % zal de regelafstand een percentage zijn van de lettergrootte.

Bovendien kan elke getal groter dan nul worden opgegeven. In dit geval wordt het geïnterpreteerd als een vermenigvuldiger van de lettergrootte. Bijvoorbeeld, als font-size de waarde 20px heeft, en line-height - 1.5, dan is dit hetzelfde als het schrijven van line-height: 30px (20px * 1.5 = 30px).

Standaard heeft de eigenschap de waarde normal, in dit geval kiest de browser automatisch de regelafstand.

Voorbeeld

In dit voorbeeld is de afstand tussen tekstregels line-height - font-size = 38px - 18px = 20px:

<p>
	some long text
</p>

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

Voorbeeld

Laten we de tussenruimte verkleinen tot 25px - 18px = 7px:

<p>
	some long text
</p>

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

Voorbeeld

In dit voorbeeld is de afstand tussen tekstregels line-height - font-size = 18px - 18px = 0px - de regels zullen praktisch aan elkaar plakken (staartjes van letters in de bovenste regel zullen de staartjes van letters in de onderste regel raken):

<p>
	some long text
</p>

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

Voorbeeld

In dit voorbeeld is de waarde van line-height - een vermenigvuldiger 1.5 van de lettergrootte. Dus line-height zal equivalent zijn aan font-size * 1.5 = 18px * 1.5 = 27px. En de werkelijke tussenruimte tussen regels zal zijn line-height - font-size = 27px - 18px = 9px:

<p>
	some long text
</p>

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

Voorbeeld

Laten we de vermenigvuldiger vergroten:

<p>
	some long text
</p>

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

Voorbeeld

Als line-height kleiner wordt gemaakt dan font-size, dan zullen de regels over elkaar heen vallen:

<p>
	some long text
</p>

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