Egenskaben line-height

Egenskaben line-height indstiller afstanden mellem tekstlinjer (linjeafstand).

Egenskaben angiver ikke mellemrummet mellem tekstlinjer, som det måske kunne se ud, den angiver højden på tekstlinjen. Det betyder, at det reelle mellemrum mellem linjer vil blive beregnet sådan: line-height - font-size = afstand mellem tekstlinjer. Eller omvendt line-height = font-size + afstand mellem tekstlinjer.

Syntaks

selektor {
	line-height: værdi;
}

Værdier

Værdien for egenskaben er enhver enhed for størrelser. Når værdien angives i %, vil linjeafstanden være i procent af skriftstørrelsen.

Derudover kan man angive ethvert tal større end nul som værdi. I dette tilfælde opfattes det som en multiplikator af skriftstørrelsen. For eksempel, hvis font-size har værdien 20px, og line-height - 1.5, så er det det samme som at skrive line-height: 30px (20px * 1.5 = 30px).

Som standard har egenskaben værdien normal, i dette tilfælde vælger browseren linjeafstand automatisk.

Eksempel

I dette eksempel vil afstanden mellem tekstlinjer være line-height - font-size = 38px - 18px = 20px:

<p>
	some long text
</p>

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

Eksempel

Lad os reducere mellemrummet til 25px - 18px = 7px:

<p>
	some long text
</p>

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

Eksempel

I dette eksempel vil afstanden mellem tekstlinjer være line-height - font-size = 18px - 18px = 0px - linjerne vil næsten smelte sammen (haler på bogstaver i den øverste linje vil røre haler på bogstaver i den nederste linje):

<p>
	some long text
</p>

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

Eksempel

I dette eksempel er værdien line-height - multiplikatoren 1.5 af skriftstørrelsen. Følgelig vil line-height være ækvivalent med font-size * 1.5 = 18px * 1.5 = 27px. Og det reelle mellemrum mellem linjer vil være line-height - font-size = 27px - 18px = 9px:

<p>
	some long text
</p>

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

Eksempel

Lad os forøge multiplikatoren:

<p>
	some long text
</p>

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

Eksempel

Hvis man gør line-height mindre end font-size, så vil linjerne overlappe hinanden:

<p>
	some long text
</p>

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