line-heightOminaisuus määrittää määrän yläpuolella ja alapuolella rivinsisäiselementtejä. Eli elementit, jotka on asetettu display: inlinetai display: inline-block. Tätä ominaisuutta käytetään useimmiten asettamaan tekstirivien alkuosa.
p ( line-height: 1.5; )line-heightOmaisuus voi hyväksyä avainsanan arvot normaltai nonesekä lukumäärä, pituus, tai prosenttiosuutta.
Spesifikaation mukaan "normaalin" arvo ei ole vain yksi konkreettinen arvo, jota sovelletaan kaikkiin elementteihin, vaan se lasketaan "kohtuulliseksi" arvoksi riippuen elementille asetetusta (tai perinnöllisestä) kirjasinkoolta.
Pituusarvo voidaan määrittää millä tahansa kelvollisella CSS-yksiköllä (px, em, rem jne.).
Prosentuaalinen arvo on elementin kirjasinkoko kerrottuna prosentilla. Esimerkiksi:
Yllä olevassa esittelyssä kolmen kappaleen rivikorkeus on asetettu vastaavasti 150%, 200% ja 250%. Runko-elementin kirjasinkoko on määritetty 20 kuvapisteeksi. Tämä tarkoittaa, että kappaleiden lasketut viivan korkeudet ovat vastaavasti 30 kuvapistettä, 40 kuvapistettä ja 50 kuvapistettä.
Yksittäiset linjakorkeudet
Suositeltava menetelmä viivan korkeuden määrittelemiseksi on käyttää lukuarvoa, jota kutsutaan ”yksikkömättömäksi” viivan korkeudeksi. Numeroarvo voi olla mikä tahansa luku, mukaan lukien desimaalipohjainen luku, kuten käytetään tämän sivun ensimmäisessä koodiesimerkissä.
Yksikkömättömiä viivakorkeuksia suositellaan, koska alielementit perivät raakaluvun arvon lasketun arvon sijaan. Tämän avulla lapsielementit voivat laskea rivikorkeutensa lasketun kirjasinkoon perusteella sen sijaan, että perivät vanhemmalta mielivaltaisen arvon, joka todennäköisesti tarvitsee ohitusta.
Selaimen tuki
| Kromi | Safari | Firefox | Ooppera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Toimii | Toimii | Toimii | Toimii | Toimii | Toimii | Toimii |
IE6 / 7 laskee viivan korkeuden väärin korvattujen elementtien (esim. Lomakeohjaimet) kanssa, jotka ovat linjassa.