Ominaisuus line-height

Ominaisuus line-height asettaa tekstirivien välisen etäisyyden (rivivälin).

Ominaisuus ei määritä tekstirivien välistä tilaa, kuten voisi kuvitella, vaan se määrittää tekstirivin korkeuden. Tämä tarkoittaa, että todellinen rivien välinen etäisyys lasketaan seuraavasti: line-height - font-size = etäisyys tekstirivien välillä. Tai toisin päin line-height = font-size + etäisyys tekstirivien välillä.

Syntaksi

valitsija {
	line-height: arvo;
}

Arvot

Ominaisuuden arvona voidaan käyttää mitä tahansa koko-yksikköä. Kun arvo annetaan prosentteina %, riviväli on prosenttiosuus fontin koosta.

Lisäksi arvoksi voidaan antaa mikä tahansa nollaa suurempi luku. Tässä tapauksessa se tulkitaan fontin koon kertoimena. Esimerkiksi, jos font-size on 20px, ja line-height on 1.5, niin tämä vastaa kirjoittamista line-height: 30px (20px * 1.5 = 30px).

Oletusarvoisesti ominaisuuden arvo on normal, jolloin selain valitsee rivivälin automaattisesti.

Esimerkki

Tässä esimerkissä etäisyys tekstirivien välillä on line-height - font-size = 38px - 18px = 20px:

<p>
	some long text
</p>

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

Esimerkki

Pienennetään väliä arvoon 25px - 18px = 7px:

<p>
	some long text
</p>

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

Esimerkki

Tässä esimerkissä etäisyys tekstirivien välillä on line-height - font-size = 18px - 18px = 0px - rivit käytännössä liimautuvat yhteen (ylärivin kirjainten alat osat koskettavat alarivin kirjainten yläosia):

<p>
	some long text
</p>

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

Esimerkki

Tässä esimerkissä arvo line-height - on fontin koon kerroin 1.5. Siten line-height vastaa arvoa font-size * 1.5 = 18px * 1.5 = 27px. Ja todellinen rivien välinen etäisyys on line-height - font-size = 27px - 18px = 9px:

<p>
	some long text
</p>

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

Esimerkki

Suurennetaan kerrointa:

<p>
	some long text
</p>

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

Esimerkki

Jos line-height tehdään pienemmäksi kuin font-size, rivit asettuvat päällekkäin:

<p>
	some long text
</p>

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