Den line-height
egenskapen definierar mängden utrymme ovanför och under inline-element. Det vill säga element som är inställda på display: inline
eller display: inline-block
. Den här egenskapen används oftast för att ställa in ledningen för textrader.
p ( line-height: 1.5; )
Den line-height
egenskapen kan acceptera nyckelordet värden normal
eller none
samt ett antal, längd, eller procent.
Enligt specifikationen är ett värde på "normalt" inte bara ett enda konkret värde som tillämpas på alla element utan beräknas snarare till ett "rimligt" värde beroende på typsnittstorleken (eller ärvt) på elementet.
Ett längdvärde kan definieras med valfri CSS-enhet (px, em, rem, etc).
Ett procentvärde är elementets teckenstorlek multiplicerat med procenten. Till exempel:
Kolla in den här pennan!
I demonstrationen ovan har de tre styckena sina radhöjder inställda till 150%, 200% respektive 250%. Kroppselementet har sin teckenstorlek definierad till 20 pixlar. Det betyder att de beräknade linjehöjderna för styckena är 30px, 40px respektive 50px.
Enhetslösa linjehöjder
Den rekommenderade metoden för att definiera radhöjd är att använda ett talvärde, kallat en ”enhetslös” radhöjd. Ett talvärde kan vara vilket som helst tal, inklusive ett decimalbaserat tal, som används i det första kodexemplet på denna sida.
Enhetslösa radhöjder rekommenderas på grund av att underordnade element kommer att ärva råvärdet snarare än det beräknade värdet. Med detta kan underordnade element beräkna sina radhöjder baserat på deras beräknade teckenstorlek, snarare än att ärva ett godtyckligt värde från en förälder som är mer benägna att behöva åsidosättas.
Webbläsarstöd
Krom | Safari | Firefox | Opera | IE | Android | iOS |
---|---|---|---|---|---|---|
Arbetar | Arbetar | Arbetar | Arbetar | Arbetar | Arbetar | Arbetar |
IE6 / 7 beräknar radhöjden felaktigt på utbytta element (t.ex. formkontroller) som är inline.