Eienskap line-height

Die eienskap line-height stel die spasie tussen tekslyne (lynspasiëring) in.

Die eienskap stel nie die spasie tussen tekslyne nie, soos dit dalk mag lyk nie, dit stel die hoogte van die tekslyn. Dit beteken dat die werklike spasie tussen lyne sal bereken word soos volg: line-height - font-size = afstand tussen tekslyne. Of omgekeerd line-height = font-size + afstand tussen tekslyne.

Sintaksis

selektor {
	line-height: waarde;
}

Waardes

Enige eenhede vir groottes kan as waarde dien. Wanneer 'n waarde in % gespesifiseer word, sal die lynspasiëring in persentasie van die fontgrootte wees.

Daarbenewens kan enige getal groter as nul as waarde gegee word. In hierdie geval word dit beskou as 'n vermenigvuldiger van die fontgrootte. Byvoorbeeld, as font-size 'n waarde van 20px het, en line-height - 1.5, dan is dit dieselfde as om line-height: 30px te skryf (20px * 1.5 = 30px).

Standaard het die eienskap 'n waarde van normal, in hierdie geval kies die bladleser die lynspasiëring outomaties.

Voorbeeld

In hierdie voorbeeld sal die afstand tussen tekslyne wees: line-height - font-size = 38px - 18px = 20px:

<p>
	some long text
</p>

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

Voorbeeld

Laat ons die spasie verminder na 25px - 18px = 7px:

<p>
	some long text
</p>

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

Voorbeeld

In hierdie voorbeeld sal die afstand tussen tekslyne wees: line-height - font-size = 18px - 18px = 0px - die lyne sal prakties aanmekaar plak (die stertjies van die letters in die boonste lyn sal die stertjies van die letters in die onderste lyn raak):

<p>
	some long text
</p>

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

Voorbeeld

In hierdie voorbeeld is die waarde van line-height 'n vermenigvuldiger van 1.5 van die fontgrootte. Dus sal line-height gelykstaande wees aan font-size * 1.5 = 18px * 1.5 = 27px. En die werklike spasie tussen lyne sal wees: line-height - font-size = 27px - 18px = 9px:

<p>
	some long text
</p>

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

Voorbeeld

Laat ons die vermenigvuldiger vergroot:

<p>
	some long text
</p>

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

Voorbeeld

As jy line-height kleiner maak as font-size, dan sal die lyne heeltemal oor mekaar val:

<p>
	some long text
</p>

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