Details van het visuele opmaakmodel

10 Details van het visuele opmaakmodel

Inhoud

10.1 Definitie van "bevattend blok"

De positie en grootte van de box(en) van een element worden soms berekend in relatie tot een bepaalde rechthoek, genaamd het bevattende blok van het element. Het bevattende blok van een element wordt als volgt gedefinieerd:

Het bevattend blok (genaamd het initiële bevattende blok) waarin het root element leeft wordt gekozen door de User Agent.
Voor andere elementen, behalve als het element absoluut gepositioneerd is, wordt het bevattende blok gevormd door de rand van de inhoud van de dichtstbijzijnde blok-niveau box van een voorouder.
Als het element 'position: fixed' heeft, wordt het bevattende blok vastgesteld door de viewport.
Als het element 'position: absolute' heeft, wordt het bevattende blok vastgesteld door de dichtstbijzijnde voorouder met een 'position' anders dan 'static', op de volgende manier:
1. In het geval dat de voorouder blok-niveau is, wordt het bevattende blok gevormd door de rand van de opvulling van de voorouder.
2. In het geval dat de voorouder inline-niveau is, hangt het bevattende blok af van de 'direction' eigenschap van de voorouder:
  1. Als de 'direction' 'ltr' is, zijn de boven- en linkerkant van het bevattende blok de bovenste- en linkerinhoudsranden van de eerste box gegenereerd door de voorouder, en de onderkant en rechterkant zijn de onderste en rechterinhoudsranden van de laatste box van de voorouder.
  2. Als de 'direction' 'rtl' is, zijn de boven- en rechterkant de bovenste en rechterranden van de eerste box gegenereerd door de voorouder, en de onder- en linkerkant zijn de onder- en linkerinhoudsranden van de laatste box van de voorouder.
Als er niet zo'n voorouder is, stelt de inhoudsrand van de box van het root element het bevattende blok vast.

Met geen positionering, worden de bevattende blokken (B.B.) in het volgende document:

<HTML>
   <HEAD>
      <TITLE>Illustration of containing blocks</TITLE>
   </HEAD>
   <BODY id="body">
      <DIV id="div1">
      <P id="p1">This is text in the first paragraph...</P>
      <P id="p2">This is text <EM id="em1"> in the 
      <STRONG id="strong1">second</STRONG> paragraph.</EM></P>
      </DIV>
   </BODY>
</HTML>

vastgesteld als volgt:

Voor box gegenereerd door	B.B. wordt vastgesteld door
body	initiële B.B. (UA-afhankelijk)
div1	body
p1	div1
p2	div1
em1	p2
strong1	p2

Als we "div1" positioneren:

   #div1 { position: absolute; left: 50px; top: 50px }

is zijn bevattende blok niet langer "body"; het wordt het initiële bevattende blok (aangezien er geen andere gepositioneerde boxen van voorouders zijn).

Als we "em1" ook positioneren:

   #div1 { position: absolute; left: 50px; top: 50px }
   #em1  { position: absolute; left: 100px; top: 100px }

wordt de tabel van bevattende blokken:

Voor box gegenereerd door	B.B. wordt vastgesteld door
body	initiële B.B.
div1	initiële B.B.
p1	div1
p2	div1
em1	div1
strong1	em1

Door "em1" te positioneren, wordt het bevattende blok de dichtstbijzijnd gepositioneerde box van een voorouder (d.i., die gegenereerd door "div1").

10.2 Breedte van de inhoud: de 'width' eigenschap

'width'

Waarde:	<length> \| <percentage> \| auto \| inherit
Startwaarde:	auto
Heeft betrekking op:	alle elementen behalve niet-vervangen inline elementen, tabelrijen, en rijgroepen
Geërfd:	nee
Percentages:	verwijzen naar de breedte van het bevattende blok
Media:	visueel

Deze eigenschap specificeert de breedte van de inhoud van boxen gegenereerd door blok-niveau en vervangen elementen.

Deze eigenschap heeft geen betrekking op niet-vervangen inline-niveau elementen. De breedte van de boxen van een niet-vervangen inline element is die van de weergegeven inhoud erin (voor enige relatieve offset van kinderen). Herinner je dat inline boxen verlopen in regelboxen. De breedte van regelboxen wordt bepaald door hun bevattende blok, maar kan ingekort worden door de aanwezigheid van floats.

De breedte van de box van een vervangen element is intrinsiek en kan geschaald worden door de User Agent als de waarde van deze eigenschap verschilt van 'auto'.

De waarden hebben de volgende betekenissen:

<length>: Specificeert een vaste breedte.
<percentage>: Specificeert een breedte in een percentage. Het percentage wordt berekend naar aanleiding van de breedte van het bevattende blok van de gegenereerde box.
auto: De breedte hangt af van de waarden van andere eigenschappen. Zie de secties hieronder.

Negatieve waarden voor 'width' zijn illegaal.

Bijvoorbeeld, de volgende regel fixeert de breedte van de inhoud van paragrafen op 100 pixels:

P { width: 100px }

10.3 Breedtes en marges berekenen

De berekende waarden van de 'width', 'margin-left', 'margin-right', 'left' en 'right' eigenschappen hangen af van het type box dat gegenereerd wordt en van elkaar. In principe, zijn de berekende waarden hetzelfde als de gespecificeerde waarden, met 'auto' vervangen door een passende waarde, maar er zijn uitzonderingen. De volgende situaties moeten onderscheiden worden:

inline, niet-vervangen elementen
inline, vervangen elementen
blok-niveau, niet-vervangen elementen in normaal verloop
blok-niveau, vervangen elementen in normaal verloop
zwevende, niet-vervangen elementen
zwevende, vervangen elementen
absoluut gepositioneerde, niet-vervangen elementen
absoluut gepositioneerde, vervangen elementen

Punten 1-6 omvatten relatieve positionering.

10.3.1 Inline, niet-vervangen elementen

De 'width' eigenschap is niet van toepassing. Een gespecificeerde waarde van 'auto' voor 'left', 'right', 'margin-left' of 'margin-right' wordt een berekende waarde van '0'.

10.3.2 Inline, vervangen elementen

Een gespecificeerde waarde van 'auto' voor 'left', 'right', 'margin-left' of 'margin-right' wordt een berekende waarde van '0'. Als 'width' een gespecificeerde waarde van 'auto' heeft en 'height' ook een gespecificeerde waarde van 'auto' heeft, is de intrinsieke breedte van het element de berekende waarde van 'width'. Als 'width' een gespecificeerde waarde van 'auto' heeft en 'height' heeft een andere gespecificeerde waarde, dan is de berekende waarde van 'width' (intrinsieke breedte)*((berekende hoogte)/(intrinsieke hoogte)).

10.3.3 Blok-niveau, niet-vervangen elementen in normaal verloop

Als 'left' of 'right' gegeven zijn als 'auto', is hun berekende waarde 0. De volgende beperkingen moeten gelden tussen de andere eigenschappen:

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = breedte van bevattend blok

(Als de border stijl 'none' is, gebruik '0' als de border breedte.) Als alle van de bovenstaande een gespecificeerde waarde hebben anders dan 'auto', wordt gezegd dat de waarden "over-beperkt" zijn en een van de berekende waarden zal moeten verschillen van zijn gespecificeerde waarde. Als de 'direction' eigenschap de waarde 'ltr' heeft, wordt de gespecificeerde waarde van 'margin-right' genegeerd en de waarde wordt berekend zodanig dat de vergelijking klopt. Als de waarde van 'direction' 'rtl' is, gebeurt dit in plaats daarvan met 'margin-left'.

Als er precies een waarde gespecificeerd is als 'auto', volgt zijn berekende waarde uit de vergelijking.

Als 'width' gezet wordt op 'auto', wordt elke andere 'auto' waarde '0' en 'width' volgt uit de resulterende vergelijking.

Als zowel 'margin-left' en 'margin-right' 'auto' zijn, zijn hun berekende waarden gelijk.

10.3.4 Blok-niveau, vervangen elementen in normaal verloop

Als 'left' of 'right' 'auto' zijn, is hun berekende waarde 0. Als 'width' een gespecificeerde waarde van 'auto' heeft en 'height' ook een gespecificeerde waarde van 'auto' heeft, is de intrinsieke breedte van het element de berekende waarde van 'width'. Als 'width' een gespecificeerde waarde van 'auto' heeft en 'height' heeft een andere gespecificeerde waarde, dan is de berekende waarde van 'width' (intrinsieke breedte)*((berekende hoogte)/(intrinsieke hoogte)). Als een van de marges 'auto' is, wordt de berekende waarde gegeven door de beperkingen hierboven. Verder, als beide marges 'auto' zijn, zijn hun berekende waarden gelijk.

10.3.5 Zwevende, niet-vervangen elementen

Als 'left', 'right', 'width', 'margin-left', of 'margin-right' gespecificeerd zijn als 'auto', is hun berekende waarde '0'.

10.3.6 Zwevende, vervangen elementen

Als 'left', 'right', 'margin-left' of 'margin-right' gespecificeerd zijn als 'auto', is hun berekende waarde '0'. Als 'width' een gespecificeerde waarde van 'auto' heeft en 'height' ook een gespecificeerde waarde van 'auto' heeft, is de intrinsieke breedte van het element de berekende waarde van 'width'. Als 'width' een gespecificeerde waarde van 'auto' heeft en 'height' heeft een andere gespecificeerde waarde, dan is de berekende waarde van 'width' (intrinsieke breedte)*((berekende hoogte)/(intrinsieke hoogte)).

10.3.7 Absoluut gepositioneerde, niet-vervangen elementen

De beperking die de berekende waarden voor deze elementen bepaalt is:

'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = breedte van het bevattend blok

(Als de border stijl 'none' is, gebruik dan '0' als de border breedte.) De oplossing voor deze beperking wordt bereikt door een aantal substituties in de volgende volgorde:

Als 'left' de waarde 'auto' heeft terwijl 'direction' 'ltr' is, vervang 'auto' met de afstand van de linkerrand van het bevattende blok tot de linker marge rand van een hypothetische box die de eerste box van het element zou zijn geweest als zijn 'position' eigenschap 'static' zou zijn geweest. (Maar liever dan echt die box te berekenen, staat het User Agenten vrij om zijn waarschijnlijke positie te schatten.) De waarde is negatief als de hypothetische box links is van het bevattende blok.
Als 'right' de waarde 'auto' heeft terwijl 'direction' 'rtl' is, vervang 'auto' met de afstand van de rechterrand van het bevattende blok tot de rechter margerand van dezelfde hypothetische box als hierboven. De waarde is positief als de hypothetische box links is van de rand van het bevattende blok.
Als 'width' 'auto' is, vervang elke resterende 'auto' voor 'left' of 'right' met '0'.
Als 'left', 'right' of 'width' (nog steeds) 'auto' zijn, vervang elke 'auto' op 'margin-left' of 'margin-right' met '0'.
Als op dit punt zowel 'margin-left' en 'margin-right' nog steeds 'auto' zijn, los de vergelijking op onder de extra beperking dat de twee marges gelijke waarden moet krijgen.
Als er op dit punt nog maar een 'auto' over is, los de vergelijking op voor die waarde.
Als op dit punt de waarden over-beperkt zijn, negeer de waarde voor oftewel 'left' (in het geval dat 'direction' 'rtl' is) of 'right' (in het geval dat 'direction' 'ltr' is) en los het op voor die waarde.

10.3.8 Absoluut gepositioneerde, vervangen elementen

Deze situatie is gelijk aan de vorige, behalve dat het element een intrinsieke breedte heeft. De volgorde van substituties is nu:

Als 'width' een gespecificeerde waarde van 'auto' heeft en 'height' ook een gespecificeerde waarde van 'auto' heeft, is de intrinsieke breedte van het element de berekende waarde van 'width'. Als 'width' een gespecificeerde waarde van 'auto' heeft en 'height' heeft een andere gespecificeerde waarde, dan is de berekende waarde van 'width' (intrinsieke breedte)*((berekende hoogte)/(intrinsieke hoogte)).
Als 'left' de waarde 'auto' heeft terwijl 'direction' 'ltr' is, vervang 'auto' met de afstand van de linkerrand van het bevattende blok tot de linkermargerand van een hypothetische box die de eerste box van het element geweest zou zijn als zijn 'position' eigenschap 'static' geweest was. (Maar liever dan die box daadwerkelijk te berekenen, staat het User Agenten vrij om zijn waarschijnlijke positie te schatten.) De waarde is negatief als de hypothetische box links is van het bevattende blok.
Als 'right' de waarde 'auto' heeft terwijl 'direction' 'rtl' is, vervang 'auto' met de afstand van de rechterrand van het bevattende blok tot de rechtermargerand van dezelfde hypothetische box als hierboven. De waarde is positief als de hypothetische box links is van de rand van het bevattende blok.
Als 'left' of 'right' 'auto' zijn, vervang elke 'auto' op 'margin-left' of 'margin-right' met '0'.
Als op dit punt beide 'margin-left' en 'margin-right' nog steeds 'auto' zijn, los dan de vergelijking op onder de extra beperking dat de twee marges gelijke waarden moeten krijgen.
Als er op dit punt maar een 'auto' over is, los dan de vergelijking op voor die waarde.
Als op dit punt de waarden over-beperkt zijn, negeer de waarde voor ofwel 'left' (in het geval dat 'direction' 'rtl' is) of 'right' (in het geval dat 'direction' 'ltr' is) en los op voor die waarde.

10.4 Minimum en maximum breedtes: 'min-width' en 'max-width'

'min-width'

Waarde:	<length> \| <percentage> \| inherit
Startwaarde:	UA afhankelijk
Heeft betrekking op:	alle elementen behalve niet-vervangen inline elementen en tabel elementen
Geërfd:	nee
Percentages:	verwijzen naar breedte van bevattend blok
Media:	visueel

'max-width'

Waarde:	<length> \| <percentage> \| none \| inherit
Startwaarde:	none
Heeft betrekking op:	alle elementen behalve niet-vervangen inline elementen en tabel elementen
Geërfd:	nee
Percentages:	verwijzen naar breedte van bevattend blok
Media:	visueel

Deze twee eigenschappen maken het mogelijk dat auteurs box breedtes beperken tot een bepaald bereik. Waarden hebben de volgende betekenissen:

<length>: Specificeert een vaste minimum of maximum berekende breedte.
<percentage>: Specificeert een percentage voor het bepalen van de berekende waarde. Het percentage wordt berekend in verhouding tot de breedte van het bevattende blok van de gegenereerde box.
none: (Alleen voor 'max-width') Geen beperking op de breedte van de box.

Het volgende algoritme beschrijft hoe de twee eigenschappen de berekende waarde van de 'width' eigenschap beïnvloeden:

De breedte wordt berekend (zonder 'min-width' en 'max-width') de regels volgend onder "Het berekenen van breedtes en marges" hierboven.
Als de berekende waarde van 'min-width' groter is dan de waarde van 'max-width', 'max-width' wordt gezet op de waarde van 'min-width'.
Als de berekende breedte groter is dan 'max-width', worden de regels hierboven opnieuw toegepast, maar deze keer wordt de waarde van 'max-width' gebruikt als de gespecificeerde waarde voor 'width'.
Als de berekende breedte kleiner is dan 'min-width', worden de regels hierboven opnieuw toegepast, maar deze keer wordt de waarde van 'min-width' gebruikt als de gespecificeerde waarde voor 'width'.

De User Agent kan een niet-negatieve minimum waarde voor de 'min-width' eigenschap definiëren, die kan variëren van element tot element en zelfs kan afhangen van andere eigenschappen. Als 'min-width' beneden deze grens gaat, ofwel omdat ze expliciet gezet was, of omdat ze 'auto' was en de regels hieronder haar te klein zouden maken, kan de User Agent de minimum waarde gebruiken als de berekende waarde.

10.5 Hoogte van de inhoud: de 'height' eigenschap

'height'

Waarde:	<length> \| <percentage> \| auto \| inherit
Startwaarde:	auto
Heeft betrekking op:	alle elementen behalve niet-vervangen inline elementen, tabelkolommen, en kolomgroepen
Geërfd:	nee
Percentages:	zie de definitie hieronder
Media:	visueel

Deze eigenschap specificeert de hoogte van de inhoud van boxen gegenereerd door blok-niveau en vervangen elementen.

Deze eigenschap heeft geen betrekking op niet-vervangen inline-niveau elementen. De hoogte van de boxen van een niet-vervangen inline element wordt gegeven door de (mogelijk geërfde) 'line-height' waarde van het element.

Waarden hebben de volgende betekenissen:

<length>: Specificeert een vaste hoogte.
<percentage>: Specificeert een hoogte in een percentage. Het percentage wordt berekend in verhouding tot de hoogte van het bevattende blok van de gegenereerde box. Als de hoogte van het bevattende blok niet expliciet gespecificeerd wordt (i.e., het hangt af van de hoogte van de inhoud), wordt de waarde geïnterpreteerd zoals 'auto'.
auto: De hoogte hangt af van de waarden van andere eigenschappen. Zie de paragraaf hieronder.

Negatieve waarden voor 'height' zijn illegaal.

Bijvoorbeeld, de volgende regel fixeert de hoogte van paragrafen op 100 pixels:

P { height: 100px }

Paragrafen die meer dan 100 pixels hoogte nodig hebben zullen overlopen volgens de 'overflow' eigenschap.

10.6 Het berekenen van hoogtes en marges

Om de waarden van 'top', 'margin-top', 'height', 'margin-bottom', en 'bottom' te berekenen moet een onderscheid gemaakt worden tussen verscheidene soorten boxen:

inline, niet-vervangen elementen
inline, vervangen elementen
blok-niveau, niet-vervangen elementen in normaal verloop
blok-niveau, vervangen elementen in normaal verloop
zwevende, niet-vervangen elementen
zwevende, vervangen elementen
absoluut gepositioneerde, niet-vervangen elementen
absoluut gepositioneerde, vervangen elementen

Punten 1-6 omvatten relatieve positionering.

10.6.1 Inline, niet-vervangen elementen

Als 'top', 'bottom', 'margin-top', of 'margin-bottom' 'auto' zijn, is hun berekende waarde 0. De 'height' eigenschap is niet van toepassing, maar de hoogte van de box wordt gegeven door de 'line-height' eigenschap.

10.6.2 Inline, vervangen elementen blok-niveau, vervangen elementen in normaal verloop, en zwevende, vervangen elementen

Als 'top', 'bottom', 'margin-top', of 'margin-bottom' 'auto' zijn, is hun berekende waarde 0. Als 'height' een gespecificeerde waarde van 'auto' heeft en 'width' heeft ook een gespecificeerde waarde van 'auto', is de intrinsieke hoogte van het element de berekende waarde van 'height'. Als 'height' een gespecificeerde waarde van 'auto' heeft en 'width' heeft een andere gespecificeerde waarde, dan is de berekende waarde van 'height' (intrinsieke hoogte)*((berekende breedte)/(intrinsieke breedte)).

10.6.3 Blok-niveau, niet-vervangen elementen in normaal verloop, en zwevende, niet-vervangen elementen

Als 'top', 'bottom', 'margin-top', of 'margin-bottom' 'auto' zijn, is hun berekende waarde 0. Als 'height' 'auto' is, hangt de hoogte af van of het element enige blok-niveau kinderen heeft en of het opvulling of borders heeft. Als het alleen inline-niveau kinderen heeft, is de hoogte de afstand tussen de bovenkant van de bovenste line box en de onderkant van de onderste line box. Als het blok-niveau kinderen heeft, is de hoogte de afstand tussen de bovenste border-rand van de bovenste blok-niveau kinderbox en de onderste border-rand van de onderste blok-niveau kinderbox. Echter, als het element een niet-nul opvulling van de bovenkant en/of border van de bovenkant heeft, dan begint de inhoud bij de bovenste margerand van het meest bovengelegen kind. Eensgelijks, als het element een niet-nul opvulling van de onderkant en/of border van de onderkant heeft, dan eindigt de inhoud bij de onderste margerand van het onderste kind. Alleen met kinderen in het normale verloop wordt rekening gehouden (d.i., zwevende boxen en absoluut gepositioneerde boxen worden genegeerd, en relatief gepositioneerde boxen worden in overweging genomen zonder hun offset). Merk op dat de kinderbox een anonieme box kan zijn.

10.6.4 Absoluut gepositioneerde, niet-vervangen elementen

Voor absoluut gepositioneerde elementen, moeten de verticale dimensies deze beperking bevredigen:

'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = hoogte van het bevattende blok

(Als de border stijl 'none' is, gebruik dan '0' als de breedte van de border.) De oplossing voor deze beperking wordt bereikt door een aantal substituties in de volgende volgorde:

Als 'top' de waarde 'auto' heeft vervang het met de afstand van de bovenste rand van het bevattende blok tot de bovenste margerand van een hypothetische box die de eerste box van het element geweest zou zijn als zijn 'position' eigenschap 'static' zou zijn geweest. (Maar liever dan echt die box te berekenen, zijn User Agenten vrij om een schatting te maken naar zijn waarschijnlijke positie.) De waarde is negatief als de hypothetische box boven het bevattende blok is.
Als zowel 'height' en 'bottom' 'auto' zijn, vervang dan 'bottom' met 0.
Als 'bottom' of 'height' (nog steeds) 'auto' zijn, vervang dan elke 'auto' voor 'margin-top' of 'margin-bottom' met '0'.
Als op dit punt zowel 'margin-top' en 'margin-bottom' nog steeds 'auto' zijn, los de vergelijking dan op onder de extra beperking dat de twee marges gelijke waarden moeten krijgen.
Als er op dit punt nog maar een 'auto' over is, los dan de vergelijking op voor die waarde.
Als op dit punt de waarden over-beperkt zijn, negeer dan de waarde voor 'bottom' en los het op voor die waarde.

10.6.5 Absoluut gepositioneerde, vervangen elementen

Deze situatie is gelijk aan de vorige, behalve dat het element een intrinsieke hoogte heeft. De volgorde van substituties is nu:

Als 'height' een gespecificeerde waarde van 'auto' heeft en 'width' heeft ook een gespecificeerde waarde van 'auto', is de intrinsieke hoogte van het element de berekende waarde van 'height'. Als 'height' een gespecificeerde waarde van 'auto' heeft en 'width' heeft een andere gespecificeerde waarde, dan is de berekende waarde van 'height' (intrinsieke hoogte)*((berekende breedte)/(intrinsieke breedte)).
Als 'top' de waarde 'auto' heeft, vervang het met de afstand van de bovenste rand van het bevattende blok tot de bovenste marge rand van een hypothetische box die de eerste box van het element geweest zou zijn als zijn 'position' eigenschap 'static' geweest was. (Maar liever dan echt de box te berekenen, staat het User Agenten vrij om zijn waarschijnlijke positie te schatten.) De waarde is negatief als de hypothetische box boven het bevattende blok is.
Als 'bottom' 'auto' is, vervang elke 'auto' voor 'margin-top' of 'margin-bottom' met '0'.
Als op dit punt zowel 'margin-top' en 'margin-bottom' nog steeds 'auto' zijn, los dan de vergelijking op onder de extra beperking dat de twee marges gelijke waarden moeten krijgen.
Als er op dit punt nog maar een 'auto' over is, los dan de vergelijking op voor die waarde.
Als op dit punt de waarden over-beperkt zijn, negeer dan de waarde voor 'bottom' en los op voor die waarde.

10.7 Minimum en maximum hoogtes: 'min-height' en 'max-height'

Het is soms nuttig om de hoogtes van elementen tot een bepaald bereik te beperken. Twee eigenschappen bieden deze functionaliteit:

'min-height'

Waarde:	<length> \| <percentage> \| inherit
Startwaarde:	0
Heeft betrekking op:	alle elementen behalve niet-vervangen inline elementen en tabel elementen
Geërfd:	nee
Percentages:	verwijzen naar de hoogte van het bevattende blok
Media:	visueel

'max-height'

Waarde:	<length> \| <percentage> \| none \| inherit
Startwaarde:	none
Heeft betrekking op:	alle elementen behalve niet-vervangen inline elementen en tabel elementen
Geërfd:	nee
Percentages:	verwijzen naar de hoogte van het bevattende blok
Media:	visueel

Deze twee eigenschappen maken het auteurs mogelijk om box hoogtes te beperken tot een bepaald bereik. Waarden hebben de volgende betekenissen:

<length>: Specificeert een vaste minimum of maximum berekende hoogte.
<percentage>: Specificeert een percentage voor het bepalen van de berekende waarde. Het percentage wordt berekend in verhouding tot de hoogte van het bevattende blok van de gegenereerde box. Als de hoogte van het bevattende blok niet expliciet gespecificeerd wordt (d.i., het hangt af van de hoogte van de inhoud), wordt de percentage waarde geïnterpreteerd zoals 'auto'.
none: (Alleen voor 'max-height') Geen grens voor de hoogte van de box.

Het volgende algoritme beschrijft hoe de twee eigenschappen de berekende waarde van de 'height' eigenschap beïnvloeden:

De hoogte wordt berekend (zonder 'min-height' en 'max-height') de regels volgend onder "Het berekenen van hoogtes en marges" hierboven.
Als de berekende waarde van 'min-height' groter is dan de waarde van 'max-height', wordt 'max-height' gezet op de waarde van 'min-height'.
Als de berekende waarde groter is dan 'max-height', worden de regels hierboven opnieuw toegepast, maar deze keer gebruikmakend van de waarde van 'max-height' als de gespecificeerde waarde voor 'height'.
Als de berekende hoogte kleiner is dan 'min-height', worden de regels hierboven opnieuw toegepast, maar deze keer gebruikmakend van de waarde van 'min-height' als de gespecificeerde waarde voor 'height'.

10.8 Berekeningen voor de regelhoogte: de 'line-height' en 'vertical-align' eigenschappen

Zoals beschreven in de sectie over contexts van inline opmaak, zetten User Agenten inline boxen in een verticale stack van regelboxen. De hoogte van een regelbox wordt bepaald als volgt:

De hoogte van elke inline box in de regelbox wordt berekend (zie "Het berekenen van hoogtes en marges" en de 'line-height' eigenschap).
De inline boxen worden verticaal uitgelijnd volgens hun 'vertical-align' eigenschap.
De hoogte van de regelbox is de afstand tussen de allerbovenste box bovenkant en de onderste box onderkant.

Lege inline elementen genereren lege inline boxen, maar deze boxen hebben nog steeds marges, opvulling, borders en een regelhoogte, en beïnvloeden aldus deze berekeningen net zoals elementen met inhoud.

Merk op dat als alle boxen in de regelbox uitgelijnd worden langs hun onderkanten, zal de regelbox precies de hoogte hebben van de grootste box. Als, echter, de boxen uitgelijnd worden langs een gemeenschappelijke baseline, kan het zijn dat de line box top en onderkant niet de bovenkant en onderkant van de grootste box aanraken.

10.8.1 Leading en half-leading

Aangezien de hoogte van een inline box kan verschillen van de font grootte van de tekst in de box (e.g., 'line-height' > 1em), kan er ruimte zijn boven en onder weergegeven tekens. Het verschil tussen de font grootte en de berekende waarde van 'line-height' wordt de leading genoemd. Half de leading wordt de half-leading genoemd.

User Agenten centreren tekens verticaal in een inline box, half-leading toevoegend aan de boven- en onderkant. Bijvoorbeeld, als een stuk tekst '12pt' hoog is en de 'line-height' waarde is '14pt', zou 2pts extra ruimte toegevoegd moeten worden: 1pt boven en 1pt onder de letters. (Dit is ook van toepassing op lege boxen, alsof de lege box een oneindig smalle letter bevatte.)

Wanneer de 'line-height' waarde minder is dan de font grootte, zal de uiteindelijke inline box hoogte minder zijn dan de font grootte en de weergegeven tekens zullen buiten de box "bloeden". Als zo'n box de rand van een line box raakt, zullen de weergegeven tekens ook in de naastliggende line box "bloeden".

Alhoewel marges, borders, en opvulling van niet-vervangen elementen niet in de berekening van de inline box hoogte komen (en dus de berekening van de regelbox), worden ze nog steeds weergegeven rondom inline boxen. Dit betekent dat als de hoogte van een regelbox korter is dan de buitenste randen van de boxen die het bevat, achtergronden en kleuren van opvulling en borders in naastliggende regelboxen kunnen "bloeden". Echter, in dit geval, kunnen sommige User Agenten de regelbox gebruiken om de border en opvullingsgebieden te "clippen" (d.i., ze niet weergeven).

'line-height'

Waarde:	normal \| <number> \| <length> \| <percentage> \| inherit
Startwaarde:	normal
Heeft betrekking op:	alle elementen
Geërfd:	yes
Percentages:	verwijzen naar de font size van het element zelf
Media:	visueel

Als de eigenschap gezet wordt op een blok-niveau element waarvan de inhoud samengesteld is uit inline-niveau elementen, specificeert het de minimale hoogte van elke gegenereerde inline box.

Als de eigenschap gezet is op een inline-niveau element, specificeert het de exacte hoogte van elke box gegenereerd door het element. (Behalve voor inline vervangen elementen, waar de hoogte van de box gegeven wordt door de 'height' eigenschap.)

Waarden voor deze eigenschap hebben de volgende betekenissen:

normal: Vertelt User Agenten om de berekende waarde op een "redelijke" waarde te zetten gebaseerd op de font grootte van het element. De waarde heeft dezelfde betekenis als <number>. We bevelen een berekende waarde voor 'normal' tussen 1.0 tot 1.2 aan.
<length>: De box hoogte wordt gezet op deze lengte. Negatieve waarden zijn illegaal.
<number>: De berekende waarde van de eigenschap is dit nummer vermenigvuldigd met de font grootte van het element. Negatieve waarden zijn illegaal. Echter, het nummer, niet de berekende waarde, wordt geërfd.
<percentage>: De berekende waarde van de eigenschap is dit percentage vermenigvuldigd met de berekende font grootte van het element. Negatieve waarden zijn illegaal.

De drie regels in het voorbeeld hieronder hebben dezelfde resulterende regelhoogte:

DIV { line-height: 1.2; font-size: 10pt }     /* number */
DIV { line-height: 1.2em; font-size: 10pt }   /* length */
DIV { line-height: 120%; font-size: 10pt }    /* percentage */

Als een element tekst bevat die weergegeven wordt in meer dan een font, zouden User Agenten de 'line-height' waarde moeten bepalen volgens de grootste font grootte.

In het algemeen, wanneer er maar een waarde is van 'line-height' voor alle inline boxen in een paragraaf (en geen grote afbeeldingen), zal het bovenstaande verzekeren dat baselines van opvolgende regels precies een 'line-height' apart zijn. Dit is belangrijk wanneer kolommen tekst in verschillende fonts uitgelijnd moeten worden, bijvoorbeeld in een tabel.

Merk op dat vervangen elementen een 'font-size' en een 'line-height' eigenschap hebben, zelfs als ze niet direct gebruikt worden om de hoogte van de box te bepalen. De 'font-size' wordt, echter, gebruikt om de 'em' en 'ex' eenheden te definiëren, en de 'line-height' heeft een rol in de 'vertical-align' eigenschap.

'vertical-align'

Waarde:	baseline \| sub \| super \| top \| text-top \| middle \| bottom \| text-bottom \| <percentage> \| <length> \| inherit
Startwaarde:	baseline
Heeft betrekking op:	inline-niveau en 'table-cell' elementen
Geërfd:	nee
Percentages:	verwijzen naar de 'line-height' van het element zelf
Media:	visueel

Deze eigenschap beïnvloedt de verticale positionering in een line box van de boxes gegenereerd door een inline-niveau element. De volgende waarden hebben alleen betekenis in verhouding tot een ouder inline-niveau element, of tot een ouder blok-niveau element, als dat element anonieme inline boxen genereert; ze hebben geen effect als er niet zo'n ouder bestaat.

Noot. Waarden van deze eigenschap hebben enigszins verschillende betekenissen in de context van tabellen. Raadpleeg aub de sectie over tabel hoogte algoritmes voor details.

baseline: Lijn de baseline van de box uit met de baseline van de ouder box. Als de box geen baseline heeft, lijn dan de onderkant van de box uit met de baseline van de ouder.
middle: Lijn het verticale middelpunt van de box uit met de baseline van de ouder box plus half de x-hoogte van de ouder.
sub: Verlaag de baseline van de box tot de juiste positie voor subscripts van de box van de ouder. (Deze waarde heeft geen effect op de font grootte van de tekst van het element.)
super: Verhoog de baseline van de box tot de juiste positie voor superscripts van de box van de ouder. (Deze waarde heeft geen effect op de font grootte van de tekst van het element.)
text-top: Lijn de bovenkant van de box uit met de bovenkant van het font van het ouder element.
text-bottom: Lijn de onderkant van de box uit met de onderkant van het font van het ouder element.
<percentage>: Verhoog (positieve waarde) of verlaag (negatieve waarde) de box met deze afstand (een percentage van de 'line-height' waarde). De waarde '0%' betekent hetzelfde als 'baseline'.
<length>: Verhoog (positieve waarde) of verlaag (negatieve waarde) de box met deze afstand. De waarde '0cm' betekent hetzelfde als 'baseline'.

De overblijvende waarden verwijzen naar de line box waarin de gegenereerde box verschijnt:

top: Lijn de bovenkant van de box uit met de bovenkant van de line box.
bottom: Lijn de onderkant van de box uit met de onderkant van de line box.

Nederlandse vertaling

U hebt gevraagd om deze site in het Nederlands te bezoeken. Voor nu wordt alleen de interface vertaald, maar nog niet alle inhoud.

Als je me wilt helpen met vertalingen, is je bijdrage welkom. Het enige dat u hoeft te doen, is u op de site registreren en mij een bericht sturen waarin u wordt gevraagd om u toe te voegen aan de groep vertalers, zodat u de gewenste pagina's kunt vertalen. Een link onderaan elke vertaalde pagina geeft aan dat u de vertaler bent en heeft een link naar uw profiel.

Bij voorbaat dank.

Document heeft de 04/02/2006 gemaakt, de laatste keer de 26/10/2018 gewijzigd
Bron van het afgedrukte document:https://www.gaudry.be/nl/css-rf-visudet.html

De infobrol is een persoonlijke site waarvan de inhoud uitsluitend mijn verantwoordelijkheid is. De tekst is beschikbaar onder CreativeCommons-licentie (BY-NC-SA). Meer info op de gebruiksvoorwaarden en de auteur.

Referenties

CSS2 Specificatie : http://www.playgarden.com

Deze verwijzingen en links verwijzen naar documenten die geraadpleegd zijn tijdens het schrijven van deze pagina, of die aanvullende informatie kunnen geven, maar de auteurs van deze bronnen kunnen niet verantwoordelijk worden gehouden voor de inhoud van deze pagina.
De auteur Deze site is als enige verantwoordelijk voor de manier waarop de verschillende concepten, en de vrijheden die met de referentiewerken worden genomen, hier worden gepresenteerd. Vergeet niet dat u meerdere broninformatie moet doorgeven om het risico op fouten te verkleinen.

Inhoudsopgave Haut