Riviväli CSS:ssä

Opitaan nyt asettamaan tekstille riviväli. Rivivälillä tarkoitetaan tekstirivien välistä etäisyyttä, eli valkoista tilaa niiden välillä. Tätä varten on tarkoitettu ominaisuus line-height, joka asettaa tekstirivin korkeuden.

Käytettäessä ominaisuutta line-height saatat kohdata pienen yllätyksen: tämä ominaisuus ei aseta väliä tekstirivien väliin, kuten voisi luulla, vaan asettaa tekstirivin korkeuden.

Tämä tarkoittaa, että todellinen näkyvä väli rivien välillä lasketaan seuraavasti: line-height - font-size = näkyvä etäisyys tekstirivien välillä.

Seuraavassa esimerkissä tekstirivien välinen etäisyys on 50px - 20px = 30px:

html<p>
  some long text
</p>

cssp {
  font-size: 20px;
  line-height: 50px;
  text-align: justify;
  width: 400px;
}

Результат: