De aanbevolen waardes zijn:
Bij normal laat je het eigenlijk aan de browser over en ben je er dus niet zeker van hoe groot de line-height gaat worden.
Bij ems, pixels enz wordt die (vaste) waarde overerft. En dat kan wel eens te klein of te groot zijn voor de font-size van het child. Dus, als de font-size van parent en child verschilt, dan beter altijd ook line-height ingeven voor het child.
Bij een percentage wordt de uitkomst van de berekening overerft. Bij bijv. 150% x 16px (dit is de font-size van een standaard configuratie) = 24px wordt die 24 px overerft. Oftewel alle children krijgen een gelijke line-height, ongeacht hun eigen gekozen font-size. Ook hier geldt dus dat als de font-size van parent en child verschilt, dan altijd ook beter de line-height ingeven voor het child.
Maar bij nummer... je voelt 'm al... wordt het nummer zelf overerft (en dus geen berekende waarde) en wordt hiermee de line-height per child berekend door de font-size van de child te vermenigvuldigen met het overerfde nummer. Nu is het alleen nog maar nodig om een line-height in te geven voor een child als je wilt dat deze afwijkt van de voorouder.
Onderstaande voorbeelden demonstreren het verschil tussen de waarde in percentage en waarde met een nummer.
Deze alinea zit in een div. De div heeft een font-size van 100% en een line-height van 150%. De ingesloten P heeft een font-size van 80% en geen eigen line-heigh. Hij overerft dus de line-height van de div. Maar wat houdt dat in? Het betekent dat de P de berekende waarde erft van de div. Dus stel, in normale omstandigheden is de font-size 16px bij 100%. Dan is de line-height van de div 150% van 16px = 24 px. En die 24px wordt overerft door de P.
De div heeft hier ook 100% font-size maar als line-height 1.5. Verder is alles gelijk aan het voorbeeld hierboven. Maar nu erft de P de absolute waarde van de div en dat is die 1.5. De line-height wordt dus, in tegenstelling tot de P hierboven, berekend voor de P en is 1.5 x 80%. En dat is kleiner dan in het voorbeeld hierboven. Overigens In Dreamweaver zie je geen verschil maar in Firefox wel. En als je een grotere lettergrootte kiest in de browser dan wordt het verschil alleen maar duidelijker.
Hier heeft de div font-size 100% en line-height 150% en de P heeft een font-size van 200%. P overerft dus net als in het blauwe voorbeeld de berekende waarde van de line-height en die is ook hier 24px. En dat is duidelijk kleiner dan in het voorbeeld hieronder.
Hier heeft de div font-size 100% en line-height 1.5 en de P heeft een font-size van 200%. P overerft dus net als in het rode voorbeeld de absolute waarde waarmee de line-height 1.5 x 200% van de font-size wordt.
WaalWeb Webdesign | Tips bij Zelfstudiehandboek Websites Ontwikkelen