line-heightVara määratleb ruumi ülespoole ja allapoole inline elemente. See tähendab elemente, mis on seatud väärtusele display: inlinevõi display: inline-block. Seda omadust kasutatakse kõige sagedamini tekstiridade esiosa määramiseks.
p ( line-height: 1.5; )line-heightVara võib nõustuda märksõna väärtused normalvõi nonesamuti number, pikkus, või protsentides.
Spetsifikatsiooni kohaselt ei ole “normaalse” väärtus lihtsalt üks konkreetne väärtus, mida rakendatakse kõigile elementidele, vaid see arvutatakse mõistliku väärtuseni, sõltuvalt elemendile määratud (või päritud) fondi suurusest.
Pikkuse väärtuse saab määratleda mis tahes kehtiva CSS-i üksuse (px, em, rem jne) abil.
Protsendiväärtus on elemendi fondi suurus korrutatuna protsendiga. Näiteks:
Ülaltoodud demos on nende kolme lõigu reakõrguseks seatud vastavalt 150%, 200% ja 250%. Kehaelemendi fondi suurus on määratud 20 pikslit. See tähendab, et lõigete arvutatud reakõrgused on vastavalt 30px, 40px ja 50px.
Ühikuta joone kõrgused
Joonekõrguse määratlemiseks on soovitatav kasutada arvväärtust, mida nimetatakse „ühikuta” joone kõrguseks. Numbriväärtuseks võib olla mis tahes arv, sealhulgas kümnendpõhine number, nagu seda kasutatakse lehe esimeses koodinäites.
Ühikuta joone kõrgused on soovitatav põhjusel, et alamelemendid pärivad arvutatud väärtuse asemel toore numbri väärtuse. Selle abil saavad lapselemendid oma rea kõrgused arvutada arvutatud fondisuuruse põhjal, selle asemel, et pärida vanemalt suvalist väärtust, mis tõenäoliselt vajab alistamist.
Brauseri tugi
| Chrome | Safari | Firefox | Ooper | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Töötab | Töötab | Töötab | Töötab | Töötab | Töötab | Töötab |
IE6 / 7 arvutab joone kõrgusel asetsevate elementide (nt vormi juhtelemendid) joone kõrguse valesti.