Egenskapen line-height

Egenskapen line-height sätter avståndet mellan textrader (radavstånd).

Egenskapen anger inte mellanrummet mellan textrader som man kanske kan tro, den anger radhöjden för texten. Det betyder att det faktiska mellanrummet mellan rader kommer att beräknas så här: line-height - font-size = avstånd mellan textrader. Eller omvänt line-height = font-size + avstånd mellan textrader.

Syntax

selektor {
	line-height: värde;
}

Värden

Värdet för egenskapen är vilka enheter för storlekar som helst. När värdet anges i % kommer radavståndet att vara i procent av teckenstorleken.

Dessutom kan man ange vilket tal som helst större än noll som värde. I det här fallet uppfattas det som en multiplikator av teckenstorleken. Till exempel, om font-size har värdet 20px, och line-height - 1.5, så är det samma som att skriva line-height: 30px (20px * 1.5 = 30px).

Som standard har egenskapen värdet normal, i det här fallet väljer webbläsaren radavstånd automatiskt.

Exempel

I det här exemplet kommer avståndet mellan textrader att vara line-height - font-size = 38px - 18px = 20px:

<p>
	some long text
</p>

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

Exempel

Minska mellanrummet till 25px - 18px = 7px:

<p>
	some long text
</p>

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

Exempel

I det här exemplet kommer avståndet mellan textrader att vara line-height - font-size = 18px - 18px = 0px - raderna kommer praktiskt taget att sitta ihop (svansarna på bokstäverna i den övre raden kommer att röra vid svansarna på bokstäverna i den nedre raden):

<p>
	some long text
</p>

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

Exempel

I det här exemplet är värdet line-height - en multiplikator på 1.5 av teckenstorleken. Följaktligen kommer line-height att motsvara font-size * 1.5 = 18px * 1.5 = 27px. Och det faktiska mellanrummet mellan raderna kommer att vara line-height - font-size = 27px - 18px = 9px:

<p>
	some long text
</p>

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

Exempel

Öka multiplikatorn:

<p>
	some long text
</p>

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

Exempel

Om man gör line-height mindre än font-size, så kommer raderna att överlappa varandra helt:

<p>
	some long text
</p>

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