Lijnhoogte - CSS-trucs | CSS Almanac 2025

De line-heighteigenschap definieert de hoeveelheid ruimte boven en onder inline-elementen. Dat zijn elementen die zijn ingesteld op display: inlineof display: inline-block. Deze eigenschap wordt meestal gebruikt om de regelafstand voor regels tekst in te stellen.

p ( line-height: 1.5; )

De line-heighteigenschap kan het sleutelwoordwaarden accepteren normalof noneals een aantal, lengte of percentage.

Volgens de specificatie is een waarde van "normaal" niet slechts een enkele concrete waarde die wordt toegepast op alle elementen, maar wordt deze berekend naar een "redelijke" waarde, afhankelijk van de lettergrootte die is ingesteld (of overgenomen) op het element.

Een lengtewaarde kan worden gedefinieerd met elke geldige CSS-eenheid (px, em, rem, enz.).

Een percentagewaarde is de lettergrootte van het element vermenigvuldigd met het percentage. Bijvoorbeeld:

Kijk eens naar deze pen!

In de bovenstaande demo hebben de drie alinea's hun regelhoogte ingesteld op respectievelijk 150%, 200% en 250%. Het body-element heeft een lettergrootte die is gedefinieerd op 20px. Dit betekent dat de berekende regelhoogtes voor de alinea's respectievelijk 30px, 40px en 50px zijn.

Lijnhoogtes zonder eenheid

De aanbevolen methode voor het definiëren van de lijnhoogte is het gebruik van een getalswaarde, ook wel een regelhoogte zonder eenheid genoemd. Een getalswaarde kan elk getal zijn, inclusief een decimaal getal, zoals wordt gebruikt in het eerste codevoorbeeld op deze pagina.

Regelhoogtes zonder eenheid worden aanbevolen vanwege het feit dat onderliggende elementen de onbewerkte getalwaarde erven in plaats van de berekende waarde. Hiermee kunnen onderliggende elementen hun lijnhoogte berekenen op basis van hun berekende lettergrootte, in plaats van een willekeurige waarde over te nemen van een ouder die eerder moet worden overschreven.