line-heightĪpašums definē daudzumu telpā virs un zem inline elementiem. Tas ir, elementi, kas ir iestatīti uz display: inlinevai display: inline-block. Šis rekvizīts visbiežāk tiek izmantots, lai iestatītu teksta rindiņu vadību.
p ( line-height: 1.5; )line-heightĪpašumu var pieņemt atslēgvārdu vērtības normalvai none, kā arī numuru, garumu, vai procentos.
Saskaņā ar specifikāciju “normāla” vērtība nav tikai viena konkrēta vērtība, kas tiek piemērota visiem elementiem, bet drīzāk tiek aprēķināta kā “saprātīga” vērtība atkarībā no elementam iestatītā (vai mantotā) fonta lieluma.
Garuma vērtību var definēt, izmantojot jebkuru derīgu CSS vienību (px, em, rem utt.).
Procentuālā vērtība ir elementa fonta lielums, kas reizināts ar procentiem. Piemēram:
Iepriekš redzamajā demonstrācijā trim rindkopām līnijas augstums ir noteikts attiecīgi uz 150%, 200% un 250%. Pamatteksta elementa fonta lielums ir noteikts 20 pikseļi. Tas nozīmē, ka rindkopu aprēķinātie līniju augstumi ir attiecīgi 30 pikseļi, 40 pikseļi un 50 pikseļi.
Bezvienības līnijas augstumi
Ieteicamā metode līnijas augstuma noteikšanai ir skaitļa vērtības izmantošana, kas tiek dēvēta par līnijas augstumu “bez vienībām”. Skaitļa vērtība var būt jebkurš skaitlis, ieskaitot decimāldaļu balstītu skaitli, kā tas tiek izmantots šīs lapas pirmajā koda piemērā.
Ieteicami vienību līniju augstumi, jo pakārtotie elementi mantos neapstrādāto skaitļu vērtību, nevis aprēķināto vērtību. Izmantojot šo elementu, bērnu elementi var aprēķināt līniju augstumu, pamatojoties uz aprēķināto fonta lielumu, nevis mantot patvaļīgu vērtību no vecākiem, kam, visticamāk, būs nepieciešams ignorēt.
Pārlūka atbalsts
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Darbi | Darbi | Darbi | Darbi | Darbi | Darbi | Darbi |
IE6 / 7 nepareizi aprēķinās līnijas augstumu uz nomainītiem elementiem (piemēram, formas vadīklas), kas atrodas vienā līnijā.