A line-height tulajdonság

A line-height tulajdonság a szöveg sorai közötti távolságot (sorközt) állítja be.

A tulajdonság nem a szöveg sorai közötti rést határozza meg, ahogy az első pillanatban tűnhet, hanem a szöveg sormagasságát. Ez azt jelenti, hogy a valódi rés a sorok között így számítódik ki: line-height - font-size = a szöveg sorai közötti távolság. Vagy fordítva line-height = font-size + a sorok közötti távolság.

Szintaxis

szelektor {
	line-height: érték;
}

Értékek

Értéke bármilyen mértékegység méretekhez lehet. Ha %-ban adjuk meg az értéket, a sorköz a betűméret százalékaként lesz értelmezve.

Ezen kívül megadhatunk bármely nullánál nagyobb számot is. Ebben az esetben azt a betűméret szorzójaként értelmezi. Például, ha a font-size értéke 20px, a line-height pedig 1.5, akkor ez egyenértékű a line-height: 30px beállítással (20px * 1.5 = 30px).

Alapértelmezetten a tulajdonság értéke normal, ebben az esetben a böngésző automatikusan választ sorközt.

Példa

Ebben a példában a szöveg sorai közötti távolság line-height - font-size = 38px - 18px = 20px lesz:

<p>
	some long text
</p>

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

Példa

Csökkentsük a rést 25px - 18px = 7px -re:

<p>
	some long text
</p>

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

Példa

Ebben a példában a szöveg sorai közötti távolság line-height - font-size = 18px - 18px = 0px lesz - a sorok gyakorlatilag összeérnek (a felső sor betűinek alsó nyúlványai érintkezni fognak az alsó sor betűinek felső nyúlványaival):

<p>
	some long text
</p>

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

Példa

Ebben a példában a line-height értéke egy 1.5 szorzó a betűmérethez képest. Következésképpen a line-height egyenlő lesz font-size * 1.5 = 18px * 1.5 = 27px. A valódi rés a sorok között pedig line-height - font-size = 27px - 18px = 9px lesz:

<p>
	some long text
</p>

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

Példa

Növeljük a szorzót:

<p>
	some long text
</p>

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

Példa

Ha a line-height értéke kisebb, mint a font-size, akkor a sorok egymásra fognak helyezkedni:

<p>
	some long text
</p>

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