Inhoud
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:
Als er niet zo'n voorouder is, stelt de inhoudsrand van de box van het root element het bevattende blok vast.
Voorbeeld(en):
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").
| 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:
Negatieve waarden voor 'width' zijn illegaal.
Voorbeeld(en):
Bijvoorbeeld, de volgende regel fixeert de breedte van de inhoud van paragrafen op 100 pixels:
P { width: 100px }
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:
Punten 1-6 omvatten relatieve positionering.
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'.
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)).
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.
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.
Als 'left', 'right', 'width', 'margin-left', of 'margin-right' gespecificeerd zijn als 'auto', is hun berekende waarde '0'.
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)).
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:
Deze situatie is gelijk aan de vorige, behalve dat het element een intrinsieke breedte heeft. De volgorde van substituties is nu:
| 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 |
| 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:
Het volgende algoritme beschrijft hoe de twee eigenschappen de berekende waarde van de 'width' eigenschap beïnvloeden:
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.
| 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:
Negatieve waarden voor 'height' zijn illegaal.
Voorbeeld(en):
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.
Om de waarden van 'top', 'margin-top', 'height', 'margin-bottom', en 'bottom' te berekenen moet een onderscheid gemaakt worden tussen verscheidene soorten boxen:
Punten 1-6 omvatten relatieve positionering.
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.
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)).
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.
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:
Deze situatie is gelijk aan de vorige, behalve dat het element een intrinsieke hoogte heeft. De volgorde van substituties is nu:
Het is soms nuttig om de hoogtes van elementen tot een bepaald bereik te beperken. Twee eigenschappen bieden deze functionaliteit:
| 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 |
| 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:
Het volgende algoritme beschrijft hoe de twee eigenschappen de berekende waarde van de 'height' eigenschap beïnvloeden:
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:
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.
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).
| 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:
Voorbeeld(en):
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.
| 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.
De overblijvende waarden verwijzen naar de line box waarin de gegenereerde box verschijnt: