Line-height, de vergeten selector

De line-height property regelt de afstand tussen regels tekst in een paragraaf <p>.
Deze property wordt niet zovaak gebruikt omwille dat velen niet weten hoe je nu deze nauwkeurig moet gebruiken, want eigenlijk is de waarde die je opgeeft de minimum afstand tussen de basislijn en de aangrenzende basislijn van een regel !!

Moeilijk ? een voorbeeld.

Op deze manier wordt line-height berekend
De waarden voor line-height kan je op verschillende manieren bepalen:

  • absolute waarde: 1.2, 3 etc…
  • lengte: cm, pt, mm, in, pc, em, px
  • percentage: 120%, 150% etc…

Dus in de regel is het zo dat de waarde van line-height berekend wordt op de ingestelde font-size

Praktijk voorbeelden

body {
font-size: 10pt;
line-height: 120%;
}

Wat hier nu bepaald is dat lettertype 10pt hoog moet zijn, en de line-height 120% keer de hoogte van 10pt is wat gelijk staat aan 12pt.

10 x 120%= 12

body {
font-size: 10pt;
line-height: 1.2;
}

Ook hier bepalen we een letterhoogte van 10pt, maar nu zeggen we dat line-height 1.2 keer de hoogte van het lettertype moet zijn, de slimmerikken onder ons zullen al weten dat deze uitkomst ook 12pt is.

Probleem met de erfelijkheid

In de 2 voorbije voorbeelden hebben we gezien dat de line-height telkens 12pt op een font-size van 10pt is. ( meest gebruikte manier ).

Maar de property line-height is erfelijk, wat wil zeggen dat als je deze waarde éénmaal bepaald, alle onderliggende elementen, de zogeheten childs, de waarde overnemen.

Dus als je niets verder bepaald in je CSS zullen alle elementen een line-height van 1.2 of 120% hebben, wat voor problemen kan zorgen omdat we toch allemaal weten dat font-size verkleint in geneste elementen wat een niet gewenst effect kan teweeg brengen voor je leesbaarheid.

Resultaat is steeds kleinere tekst met evenveel spatie tussen de regels over je gehele pagina.

Visueel voorbeeld

  1. Voorbeeld met 120% line-height die overgenomen wordt, let op de spatie tussen de regels in de blockquote, die is hetzelfde als deze van de paragraaf
  2. Voorbeeld met 1.2 line-height, let ook deze keer op de spatie tussen de regels , maar door line-height 1.2 te gebruiken wordt deze opnieuw berekend op 8pt