Handleiding HTML - CSS en elementen

CSS		CSS en elementen

Handleiding HTML Inhoud CSS | Inhoud HTML | Trefwoordenregister | Begin

Normal flow

De wijze waarop elementen standaard hun plaats vinden op de canvas heet normal flow.

Elementen op blokniveau worden in verticale richting na elkaar geplaatst. De afstand tussen de bovenrand van een element en een voorgaande sibling of parent element wordt bepaald door de margin eigenschappen. Zoals beschreven bij de box, schuiven verticale margins daarbij in elkaar. In horizontale richting wordt de afstand tussen de box en het parent element bepaald door de margin eigenschappen.

In het volgende voorbeeld zijn drie sibling elementen op blokniveau (P) geplaatst binnen hun parent element (BODY). Met behulp van de margin-left eigenschap is de afstand van de tweede en derde paragraaf tot de rand van het BODY element bepaald. Het document is als volgt opgebouwd:

<BODY ..> <P CLASS="p1">Dit is paragraaf 1<BR> De margin-eigenschappen zijn niet gebruikt.</P> <P CLASS="p2">Dit is paragraaf 2<BR> De margin-left eigenschap heeft de waarde 15px.</P> <P CLASS="p3">Dit is paragraaf 3<BR> De margin-left eigenschap heeft de waarde 30px.</P> </BODY>

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

<STYLE TYPE="text/css">  </STYLE>

Inline elementen worden in horizontale richting na elkaar geplaatst. Aangrenzende boxen op een regel vormen een line box. De beschikbare breedte wordt bepaald door het element op blokniveau, waarvan de inline elementen onderdeel zijn. Een inline box die niet geheel in een line box past, wordt opgesplitst in meerdere inline boxen en verdeeld over verschillende regels. Indien de inline boxen op een regel samen niet de totale breedte van de line box hebben, dan worden ze uitgelijnd met behulp van de text-align eigenschap. Aaneengesloten tekst in een element op blokniveau welke niet behoort tot een inline element, vormt een zogenaamde "anonymous" inline box. Deze worden op dezelfde wijze behandeld als gewone inline boxen.

In het volgende voorbeeld zijn drie inline elementen (SPAN) opgenomen in een element op blokniveau (P). De paragraaf bevat daarnaast nog tekst welke geen deel uitmaakt van een inline element. Het document is als volgt opgebouwd:

<BODY ..> <P><SPAN CLASS="s1">Deze paragraaf bevat drie inline elementen en een los stuk tekst.</SPAN> <SPAN CLASS="s2">De boxen van de inline elementen worden in horizontale richting achter elkaar geplaatst.</SPAN> <SPAN CLASS="s3">Indien een inline box niet op een regel past, wordt deze opgesplitst in meerdere delen.</SPAN> Tekst welke niet tot de inhoud van een inline element behoort, genereert een "anonieme" inline box.</P> </BODY>

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

<STYLE TYPE="text/css">  </STYLE>

Vervolg: Regelhoogte

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