Egenskapen line-height

Egenskapen line-height setter avstanden mellom tekstlinjer (linjeavstand).

Egenskapen angir ikke mellomrommet mellom tekstlinjer, som det kanskje kan virke som, den angir høyden på tekstlinjen. Dette betyr at det faktiske mellomrommet mellom linjene vil blir beregnet slik: line-height - font-size = avstand mellom tekstlinjer. Eller omvendt: line-height = font-size + avstand mellom tekstlinjer.

Syntaks

velger {
	line-height: verdi;
}

Verdier

Verdien for egenskapen kan være enhver enhet for størrelser. Når verdien angis i % vil linjeavstanden være i prosent av skriftstørrelsen.

I tillegg kan du angi et hvilket som helst tall større enn null som verdi. I dette tilfellet blir det oppfattet som en multiplikator av skriftstørrelsen. For eksempel, hvis font-size har verdien 20px, og line-height - 1.5, så er dette det samme som å skrive line-height: 30px (20px * 1.5 = 30px).

Som standard har egenskapen verdien normal, i dette tilfellet velger nettleseren linjeavstand automatisk.

Eksempel

I dette eksempelet vil avstanden mellom tekstlinjene 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

La oss redusere mellomrommet til 25px - 18px = 7px:

<p>
	some long text
</p>

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

Eksempel

I dette eksempelet vil avstanden mellom tekstlinjene være line-height - font-size = 18px - 18px = 0px - linjene vil praktisk talt smelte sammen (halene på bokstavene i den øverste linjen vil berøre halene på bokstavene i den nederste):

<p>
	some long text
</p>

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

Eksempel

I dette eksempelet er verdien line-height - en multiplikator på 1.5 av skriftstørrelsen. Følgelig vil line-height tilsvare font-size * 1.5 = 18px * 1.5 = 27px. Og det faktiske mellomrommet mellom linjene 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

La oss øke multiplikatoren:

<p>
	some long text
</p>

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

Eksempel

Hvis du gjør line-height mindre enn font-size, vil linjene overlappe hverandre fullstendig:

<p>
	some long text
</p>

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