Eigenaren van kleine bedrijven met een gedrukte achtergrond zijn bekend met de term 'leading', die verwijst naar de afstand tussen tekstregels. Bij het maken van een HTML-pagina is het equivalent van leading de CSS "line-height" -eigenschap, die wordt gebruikt om de hoeveelheid ruimte tussen elke regel in te stellen. De lijnhoogte kan worden ingesteld op een vaste hoogte, bijvoorbeeld 12 pixels, of als een percentage van de tekengrootte, bijvoorbeeld 120 procent. Als u de waarde instelt op "normaal", wordt de regelafstand teruggezet naar de standaardwaarde.

1.

Open een webontwerpapplicatie of teksteditor en maak een nieuwe HTML-pagina of open een bestaande.

2.

Voeg de volgende code toe aan de hoofdtekst van de webpagina:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris specimentum pulvinar pulvinar. Suspendisse eros nulla, sodales ut tincidunt sit amet, facilisis id dui. Donec pharetra euismod mattis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

3.

Voeg de volgende CSS-stylesheet toe aan het gedeelte van de pagina:

Deze CSS-regel is van toepassing op de div met de id "exampleText", die de breedte instelt op 400 pixels en de lettergrootte op 14 pixels, waarbij de alinea van de tekst over een aantal regels wordt weergegeven. Sla de pagina op en open vervolgens in een webbrowser om het resultaat te bekijken.

4.

Voeg de volgende nieuwe CSS-regel toe aan de stijlpagina op de pagina:

exampleText p {

line-height: 200%; 

}

Met deze regel wordt de regelafstand van de alinea gewijzigd in 200% van de tekengrootte, in dit geval 28 pixels. Als de lettergrootte verandert, wordt de regelafstand automatisch proportioneel gewijzigd. Sla de pagina op en laad hem opnieuw in uw webbrowser om het effect van de eigenschap line-spacing te zien.

5.

Wijzig de lijnhoogte-instelling naar 20 pixels, als volgt:

exampleText p {

 line-height: 20px; 

}

Hiermee wordt een constante afstand van 20 pixels tussen tekstregels ingesteld, onafhankelijk van de tekstlettergrootte. Sla de pagina op en ververs in uw browser om de nieuwe regelafstand te zien.

Tip

• Vaste lijnhoogten kunnen worden opgegeven in eenheden van pixels, punten of centimeters.