CSS CSS en elementen

Handleiding HTML Inhoud CSS | Inhoud HTML | Trefwoordenregister | Begin


Inhoud onderdeel: Introductie CSS en elementen | Indeling elementen | De box | Normal flow | Regelhoogte | Zwevende elementen | Positioneren van elementen | Relatief positioneren | Absoluut positioneren | Werken met lagen


Regelhoogte

Inline boxen op dezelfde regel kunnen een verschillende hoogte hebben. De hoogte van een regel wordt bepaald door de hoogste box.

In het volgende voorbeeld zijn drie inline elementen (SPAN) opgenomen in een element op blokniveau (P). De opbouw is als volgt:

<P CLASS="p1"><SPAN CLASS="s1">Dit is een paragraaf met drie inline elementen.</SPAN> <SPAN CLASS="s2">De lettergrootte voor deze elementen is verschillend.</SPAN> <SPAN CLASS="s3">De hoogte van een regel wordt bepaald door het element dat de grootste box heeft.</SPAN></P>

De opbouw van het stijlblok in de head van het document is:

<STYLE TYPE="text/css">
<!--
.s1 { background: fuchsia; font-size: 13px; }
.s2 { background: lime; font-size: 21px; }
.s3 { background: yellow; font-size: 17px; }
-->
</STYLE>

Voorbeeld regelhoogte


Met behulp van de line-height eigenschap kan de regelhoogte vastgelegd worden. In het volgende voorbeeld is dat gedaan voor het element op blokniveau P. Het document is op dezelfde wijze opgebouwd als in het vorige voorbeeld. De opbouw van het stijlblok in de head van het document is:

De opbouw van het stijlblok in de head van het document is:

<STYLE TYPE="text/css">
<!--
.p1 { line-height: 27px; }
.s1 { background: fuchsia; font-size: 13px; }
.s2 { background: lime; font-size: 21px; }
.s3 { background: yellow; font-size: 17px; }
-->
</STYLE>

Voorbeeld regelhoogte


Replaced elementen die inline boxen vormen (bijvoorbeeld het IMG element) beïnvloeden de regelhoogte door de afmetingen die ze van zichzelf hebben. Als de hoogte van het replaced element groter is dan de met de line-height eigenschap bepaalde regelhoogte, dan bepaalt de grootste de hoogte van de line box.

<P CLASS="p1">De regelhoogte is met de line-height eigenschap bepaald op 21px. Wanneer een afbeelding <IMG ..> gebruikt wordt, moet de regelhoogte aangepast worden aan de hoogte van IMG element.</P>

De opbouw van het stijlblok in de head van het document is:

<STYLE TYPE="text/css">
<!--
.p1  { font-size: 13px; line-height: 21px; }
-->
</STYLE>

Voorbeeld regelhoogte


Wanneer de box van een inline element minder hoog is dan die van de line box, wordt deze standaard zo geplaatst dat de basislijn van de tekst voor de verschillende inline elementen gelijk is. Met behulp van de vertical-align eigenschap kan de inline box ook op een andere manier uitgelijnd worden ten opzichte van de line box.

In het volgende voorbeeld is een afbeelding in de tekst opgenomen en uitgelijnd met de vertical-align eigenschap. Het opbouw is als volgt:

<P CLASS="p1">De regelhoogte is met de line-height eigenschap bepaald op 21px. Wanneer een afbeelding <IMG CLASS="img1" ..> gebruikt wordt, moet de regelhoogte aangepast worden aan de hoogte van IMG element.</P>

De opbouw van het stijlblok in de head van het document is:

<STYLE TYPE="text/css">
<!--
.p1   { font-size: 13px; line-height: 21px; }
.img1 { vertical-align: middle; }
-->
</STYLE>

Voorbeeld regelhoogte


Vervolg: Zwevende elementen


Inhoud onderdeel | Inhoud CSS | Inhoud HTML | Trefwoordenregister | Begin

Handleiding HTML (https://www.handleidinghtml.nl/)
Copyright © 1995-2024 Hans de Jong
Laatste wijziging: 18 mei 2003