Contenu
La position et la taille de la boîte d'un élément sont parfois calculées par rapport à un certain rectangle, appelé le bloc conteneur de l'élément. On le définit ainsi :
Quand il n'existe pas un tel ancêtre, c'est le bord du contenu de la boîte de l'élément racine qui établit le bloc conteneur.
Dans ce document, sans positionnement :
<HTML>
<HEAD>
<TITLE>Illustration des blocs conteneurs</TITLE>
</HEAD>
<BODY id="body">
<DIV id="div1">
<P id="p1">Voici un texte dans le premier paragraphe...</P>
<P id="p2">Voici un texte <EM id="em1">dans le
<STRONG id="strong1">second</STRONG> paragraphe...</EM></P>
</DIV>
</BODY>
</HTML>
Les blocs conteneurs sont établis ainsi :
| Pour la boîte générée par | Le bloc conteneur est établi par |
|---|---|
| body | bloc conteneur initial (selon l'agent utilisateur) |
| div1 | body |
| p1 | div1 |
| p2 | div1 |
| em1 | p2 |
| strong1 | p2 |
Si on positionne "div1" :
#div1 { position: absolute; left: 50px; top: 50px }
son bloc conteneur n'est plus "body" ; c'est "div1" qui est devenu le bloc conteneur initial (car il n'y a pas de boîtes d'autres ancêtres positionnés).
Si on positionne également "em1" :
#div1 { position: absolute; left: 50px; top: 50px }
#em1 { position: absolute; left: 100px; top: 100px }
La table des blocs conteneurs devient :
| Pour la boîte générée par | Le bloc conteneur est établi par |
|---|---|
| body | bloc conteneur initial |
| div1 | bloc conteneur initial |
| p1 | div1 |
| p2 | div1 |
| em1 | div1 |
| strong1 | em1 |
En positionnant "em1", son bloc conteneur devient la boîte de son plus proche ancêtre positionné (c.à.d. celle générée par "div1").
| Valeur : | <longueur> | <pourcentage> | auto | inherit |
| Initiale : | auto |
| S'applique à : | tous les éléments sauf ceux de type en-ligne non remplacés ainsi que les rangées et groupes de rangées des tables. |
| Héritée : | non |
| Pourcentage : | se rapporte à la largeur du bloc conteneur |
| Médias : | visuel |
Cette propriété spécifie la largeur du contenu des boîtes générées par les éléments de type bloc et ceux remplacés.
Celle-ci ne s'applique pas aux éléments non remplacés et de type en-ligne. Les largeurs de leurs boîtes correspondent à celles de leur contenus représentés avant un décalage relatif de leurs enfants. Les boîtes en-ligne se répandent dans des boîtes de ligne. Les largeurs des boîtes de ligne sont données par leur bloc conteneur, celles-ci pouvant rétrécir du fait de la présence de flottants.
La boîte d'un élément remplacé a une largeur intrinsèque l'agent utilisateur pouvant la faire varier en échelle quand la valeur de la propriété est différente de 'auto'.
Les valeurs ont les significations suivantes :
La propriété 'width' n'admet pas de valeurs négatives.
Par exemple, cette règle fixe la largeur du contenu des paragraphes à 100 pixels :
P { width: 100px }
Pour un élément donné, les valeurs calculées des propriétés 'width', 'margin-left', 'margin-right', 'left' et 'right' dépendent du type de la boîte générée par cet élément et de chacune d'entre elles. En principe, ces valeurs sont les mêmes que celles qui sont spécifiées, les valeurs 'auto' étant remplacées par certaines valeurs appropriées, mais il y a des exceptions. On doit distinguer les cas suivants :
Les points 1 à 6 incluent le positionnement relatif.
La propriété 'width' ne s'applique pas. Quand on spécifie une valeur 'auto' pour les propriétés 'left', 'right', 'margin-left' ou 'margin-right', leur valeur calculée devient '0'.
Quand on spécifie une valeur 'auto' pour les propriétés 'left', 'right', 'margin-left' ou 'margin-right' leur valeur calculée devient '0'. Pour la valeur spécifiée 'auto', la propriété 'width' prend, comme valeur calculée, la largeur intrinsèque de l'élément.
Quand on spécifie la valeur 'auto' aux propriétés 'width' et 'height', la valeur calculée de 'width' correspond à la largeur intrinsèque de l'élément. Si on spécifie la valeur 'auto' pour la propriété 'width' et une autre valeur pour la propriété 'height', la valeur calculée de 'width' est le résultat de l'opération (largeur intrinsèque) * ( (hauteur calculée) / (hauteur intrinsèque) ).
Quand on spécifie la valeur 'auto' aux propriétés 'left' ou 'right', leur valeur calculée est '0'. Les équations suivantes doivent être vérifiées pour les autres propriétés :
'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = largeur du bloc conteneur
Quand la valeur de la propriété 'border-style' est 'none', utiliser pour l'épaisseur de la bordure la valeur '0'. Quand toutes les propriétés précédentes ont une valeur spécifiée autre que 'auto', on dit que les valeurs sont "sur-contraintes" et l'une des valeurs calculées devra être différente de celle qui aura été spécifiée. Quand la propriété 'direction' a la valeur 'ltr', la valeur spécifiée pour la propriété 'margin-right' sera écartée, sa valeur calculée sera déterminée de manière à ce que l'égalité précédente soit vérifiée. Et de la même façon, pour la propriété 'margin-left', quand la propriété 'direction' a la valeur 'rtl'.
Si l'une exactement des valeurs spécifiées est 'auto', sa valeur calculée est déduite de l'égalité.
Si la propriété 'width' a la valeur 'auto', les valeurs spécifiées 'auto' d'autres propriétés deviennent '0', la valeur calculée de 'width' se déduisant alors de l'égalité.
Si les deux propriétés 'margin-left' et 'margin-right' ont la valeur 'auto', leurs valeurs calculées sont égales.
Noter que la valeur de la propriété 'width' ne peut être supérieure à celle de 'max-width', ni inférieure à celle de 'min-width'. En particulier, elle ne peut pas être négative. Voir les règles s'y rapportant au chapitre 10.4 plus loin.
Quand les propriétés 'left' ou 'right' ont la valeur 'auto', leur valeur calculée devient '0'. Quand on spécifie la valeur 'auto' pour la propriété 'width', sa valeur calculée prend celle de la largeur intrinsèque de l'élément. Si l'une des propriétés, 'margin-left' ou 'margin-right', a la valeur 'auto', sa valeur calculée se déduit de l'équation. Et si celles-ci ont toutes les deux la valeur 'auto', leurs valeurs calculées sont égales
Quand les propriétés 'width' et 'height' ont toutes deux la valeur spécifiée 'auto', la valeur calculée de la première est égale à la largeur intrinsèque de l'élément. Si la valeur spécifiée de 'width' est 'auto' et celle de 'height' une autre valeur, alors la valeur calculée de 'width' est obtenue par l'opération (largeur intrinsèque) * ( (hauteur calculée) / (hauteur intrinsèque) ).
Quand les propriétés 'left', 'right', 'width', 'margin-left' ou 'margin-right' ont une valeur spécifiée 'auto', leur valeur calculée devient '0'.
Quand les propriétés 'left', 'right', 'margin-left' ou 'margin-right' ont une valeur spécifiée 'auto', leur valeur calculée devient '0'. Pour la propriété 'width' et une valeur spécifiée 'auto', sa valeur calculée devient celle de la largeur intrinsèque de l'élément.
Quand les propriétés 'width' et 'height' ont toutes deux une valeur spécifiée 'auto', la valeur calculée de 'width' devient celle de la largeur intrinsèque de l'élément. Si la propriété 'height' a une valeur spécifiée autre que 'auto', la propriété 'width' ayant une valeur 'auto', la valeur calculée de 'width' est obtenue par l'opération (largeur intrinsèque) * ( (hauteur calculée) / (hauteur intrinsèque) ).
Les valeurs calculées de ces éléments sont déterminées selon cette équation :
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = largeur du bloc conteneur
Quand la valeur de la propriété 'border-style' est 'none', utiliser pour l'épaisseur de la bordure la valeur '0'. Cette équation se résout dans une succession de substitutions selon l'ordre suivant :
Ce cas est similaire au précédent, à l'exception que l'élément a une largeur intrinsèque. La succession des substitutions étant maintenant :
| Valeur : | <longueur> | <pourcentage> | inherit |
| Initiale : | selon l'agent utilisateur |
| S'applique à : | tous les éléments, sauf à ceux de type en-ligne non remplacés et aux éléments des tables |
| Héritée : | non |
| Pourcentage : | se rapporte à la largeur du bloc conteneur |
| Médias : | visuel |
| Valeur : | <longueur> | <pourcentage> | none | inherit |
| Initiale : | none |
| S'applique à : | tous les éléments, sauf à ceux de type en-ligne non remplacés et aux éléments des tables |
| Héritée : | non |
| Pourcentage : | se rapporte à la largeur du bloc conteneur |
| Médias : | visuel |
Ces propriétés permettent aux auteurs de restreindre les dimensions d'une boîte dans certaines proportions. Les significations des valeurs sont :
L'algorithme suivant décrit l'action de ces deux propriétés pour obtenir la valeur calculée de la propriété 'width' :
L'agent utilisateur peut définir une valeur minimum non négative pour la propriété 'min-width', celle-ci pouvant varier d'un élément à l'autre et pouvant même dépendre d'autres propriétés. Si la valeur de 'min-width' descend en dessous de cette limite, celle-ci étant spécifiée explicitement ou ayant la valeur 'auto' et les règles ci-dessous la rendant ainsi trop petite, alors l'agent utilisateur peut considérer cette valeur limite comme étant la valeur calculée.
| Valeur : | <longueur> | <pourcentage> | auto | inherit |
| Initiale : | auto |
| S'applique à : | tous les éléments, sauf ceux de type en-ligne non remplacés, et les colonnes et groupes de colonnes des tables |
| Héritée : | non |
| Pourcentage : | voir plus loin |
| Médias : | visuel |
Cette propriété spécifie la hauteur du contenu des boîtes générées par les éléments de type bloc et ceux remplacés.
Celle-ci ne s'applique pas au éléments de type en-ligne non remplacés. C'est la valeur (pouvant être héritée) de leur propriété 'line-height' qui donne la hauteur des boîtes de ceux-ci.
[Errata : Étant donné que l'agent utilisateur est libre de choisir le bloc conteneur de l'élément racine (voir la section 10.1), il peut, par exemple, calculer une hauteur en pourcentage pour l'élément racine en fonction de la hauteur de la zone de visualisation.]
Les significations des valeurs sont :
La propriété 'height' n'admet pas de valeur négative.
Par exemple, cette règle fixe la hauteur des paragraphes à 100 pixels :
P { height: 100px }
Les paragraphes qui requièrent une hauteur supérieure à 100px vont déborder selon la propriété 'overflow'.
Pour le calcul des valeurs des propriétés 'top', 'margin-top', 'height', 'margin-bottom' et 'bottom', on doit effectuer une distinction entre les différentes sortes de boîtes :
Les points 1 à 6 incluent le positionnement relatif.
Quand les propriétés 'top', 'bottom', 'margin-top' ou 'margin-bottom' ont la valeur spécifiée 'auto', leur valeur calculée devient '0'. La propriété 'height' ne s'applique pas. La hauteur de l'aire du contenu est égale à la taille effective de la police de l'élément. Les espacements, bordures et marges verticales d'une boîte en-ligne non remplacée commencent en haut et en bas de la police, et non pas en haut et en bas de la ligne. Le calcul de la hauteur de la boîte de la ligne employant seulement la propriété 'line-height'.
Si plusieurs tailles de polices sont utilisées (cela peut arriver quand les glyphes proviennent de différentes polices), la hauteur de l'aire du contenu n'est pas définie par cette spécification. On recommande néanmoins que la plus grande taille de police soit retenue pour la détermination de cette hauteur.
Quand les propriétés 'top', 'bottom', 'margin-top' ou 'margin-bottom' ont la valeur spécifiée 'auto', leur valeur calculée devient '0'. Si les propriétés 'width' et 'height' ont toutes deux la valeur spécifiée 'auto', la valeur calculée de 'width' prend celle de la largeur intrinsèque de l'élément. Si la propriété 'width' a la valeur spécifiée 'auto' et la propriété 'height' une autre valeur, alors la valeur calculée de 'width' est obtenue par l'opération (largeur intrinsèque) * ( (hauteur calculée) / (hauteur intrinsèque) ).
Quand les propriétés 'top', 'bottom', 'margin-top', ou 'margin-bottom' ont la valeur spécifiée 'auto', leur valeur calculée devient '0'. Si la propriété 'height' a la valeur spécifiée 'auto', la hauteur de l'élément dépend d'un éventuel enfant de type bloc et des espacements et bordures de celui-ci.
Si l'élément a des enfants de type en-ligne, la hauteur de celui-ci est égale à la distance entre le sommet de la boîte de ligne la plus élevée et le bas de celle la plus basse.
Si l'élément a des enfants de type bloc, la hauteur de celui-ci est égale à la distance entre la bordure du haut de la boîte d'un enfant la plus élevée et la bordure du bas de celle d'un enfant la plus basse. Cependant, quand l'espacement et/ou la bordure du haut de l'élément ne sont pas nuls, alors le contenu de l'élément commence à partir du bord de la marge haute de l'enfant le plus élevé. Et, de façon similaire, le contenu finit au bord de la marge basse de l'enfant le plus en bas.
Seuls les enfants dans un flux normal sont pris en compte (c.à.d. les boîtes des éléments flottants et celles des éléments en position absolue sont ignorées, les boîtes des éléments en position relative sont considérées sans leur décalage). Noter que la boîte de l'enfant peut être anonyme.
Pour les éléments en position absolue, les dimensions verticales doivent vérifier cette équation :
'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = hauteur du bloc conteneur.
Quand la valeur de la propriété 'border-style' est 'none', utiliser pour l'épaisseur de la bordure la valeur '0'. Cette équation se résout dans une succession de substitutions selon l'ordre suivant :
Ce cas est similaire au précédent, à l'exception que l'élément a une hauteur intrinsèque. La succession des substitutions étant maintenant :
Il est parfois utile de restreindre la hauteur d'un élément dans certaines proportions. Deux propriétés offrent cette fonctionnalité :
| Valeur : | <longueur> | <pourcentage> | inherit |
| Initiale : | 0 |
| S'applique à : | tous les éléments, sauf ceux de type en-ligne non remplacés et les éléments des tables |
| Héritée : | non |
| Pourcentage : | se rapporte à la hauteur du bloc conteneur |
| Médias : | visuel |
| Valeur : | <longueur> | <pourcentage> | none | inherit |
| Initiale : | none |
| S'applique à : | tous les éléments, sauf ceux de type en-ligne non remplacés et les éléments des tables |
| Héritée : | non |
| Pourcentage : | se rapporte à la hauteur du bloc conteneur |
| Médias : | visuel |
Ces deux propriétés permettent aux auteurs de restreindre les hauteurs des boîtes dans certaines proportions. Les significations des valeurs sont :
L'algorithme suivant décrit l'action de ces deux propriétés pour obtenir la valeur calculée de la propriété 'height' :
Comme décrit dans le passage traitant des contextes de mise en forme en-ligne, les agents utilisateurs rangent les boîtes en-ligne dans des boîtes de ligne, les empilant les unes sur les autres. On détermine la hauteur de ces boîtes de ligne ainsi :
Les éléments en-ligne vides engendrent des boîtes en-ligne vide, mais ces dernières ont quand même des marges, des espacements, des bordures et une hauteur de ligne, et donc, elles influencent ces calculs tout comme les élément avec un contenu.
Noter que, quand toutes les boîtes, dans la boîte de ligne, sont alignées sur leurs bas, la boîte de ligne aura exactement la hauteur de celle qui a la plus grande hauteur. Cependant, quand celles-ci sont alignées sur une ligne de base commune, le haut et le bas de la boîte de ligne peuvent ne pas coïncider avec ceux de la boîte de plus grande hauteur.
La hauteur d'une boîte de ligne pouvant différer de celle de la taille de police du texte contenu dans une boîte (ex. 'line-height' > 1em), il peut y avoir un espace au-dessus et en-dessous des glyphes ainsi rendus. On appelle cette différence, entre la taille de la police et la valeur calculée pour la propriété 'line-height', l'interlignage, et la moitié de celle-ci, le demi-interlignage.
Les agents utilisateurs centrent verticalement les glyphes dans une boîte en-ligne, ajoutant un demi-interlignage au-dessus et en-dessous de ceux-ci. Par exemple, un extrait de texte dont la hauteur est de '12pt' et la valeur de la propriété 'line-height' est '14pt', il serait ajouté un espace supplémentaire de 2pts, répartis en 1pt au-dessus et 1pt au-dessous des lettres. Ceci concerne aussi les boîtes vides, celles-ci se comportant comme si elles contenaient des lettres infiniment réduites.
Quand la valeur de la propriété 'line-height' est inférieure à la taille de la police, la hauteur finale de la boîte en-ligne sera inférieure à la taille de la police et l'affichage des glyphes "débordera" de la boîte de ligne. Si une telle boîte en-ligne touche le bord de la boîte de ligne, l'affichage "débordera" aussi dans la boîte de ligne adjacente.
Bien que les marges, bordures et espacements des éléments non remplacés n'interviennent pas dans le calcul de la hauteur de la boîte en-ligne (et ainsi dans celui de la boîte de ligne), ceux-ci sont quand même rendus autour de la boîte de ligne. En conséquence, si la hauteur de la boîte de ligne est inférieure à celle comprise entre les bords externes des boîtes qui y sont contenues, les arrière-plans et les couleurs des espacements peuvent "déborder" dans les boîtes de ligne adjacentes. Cependant, certains agents utilisateurs peuvent utiliser la boîte de ligne pour "découper" les aires de bordure et d'espacement (et ne pas les rendre).
| Valeur : | normal | <nombre> | <longueur> | <pourcentage> | inherit |
| Initiale : | normal |
| S'applique à : | tous les éléments |
| Héritée : | oui |
| Percentages: | se rapporte à la taille de la police de l'élément lui-même |
| Médias : | visuel |
Quand on applique cette propriété à un élément de type bloc dont le contenu est composé d'éléments de type en-ligne, celle-ci spécifie la hauteur minimale de chacune des boîtes en-ligne générées. Cette hauteur minimale se décompose en une hauteur minimale au-dessus de la ligne de base de l'élément de type bloc et en une profondeur minimale au-dessous de celui-ci, exactement comme si chacune des boîtes de ligne commençait par une boîte en-ligne de largeur nulle, celle-ci ayant les valeurs des propriétés de police et de hauteur de ligne de l'élément de type bloc (ce que TEX appelle un "étai").
Quand on l'applique à un élément de type en-ligne, celle-ci spécifie la hauteur exacte de chacune des boîtes générées par l'élément. Sauf dans le cas des éléments de type en-ligne remplacés, où la hauteur de la boîte est donnée par la propriété 'height'.
Les significations des valeurs pour cette propriété sont :
Les trois règles suivantes produisent une même hauteur de ligne :
DIV { line-height: 1.2; font-size: 10pt } /* nombre */
DIV { line-height: 1.2em; font-size: 10pt } /* longueur */
DIV { line-height: 120%; font-size: 10pt } /* pourcentage */
Quand un élément contient du texte dont l'affichage requiert plusieurs polices, les agents utilisateurs devraient en déterminer la valeur pour la propriété 'line-height' en fonction de celle qui a la plus grande taille.
Généralement, quand la propriété 'line-height' a une seule valeur pour toutes les boîtes en-ligne d'un paragraphe (sans images trop hautes), la recommandation précédente devrait faire que les lignes de base des lignes successives soient indépendantes de la hauteur de ligne. Ceci est important quand on doit aligner des colonnes de texte dans différentes polices, par exemple dans une table.
Noter que les éléments remplacés ont une propriété 'font-size' et une propriété 'line-height', même si on ne les utilise pas directement dans la détermination de la hauteur de la boîte : les valeurs exprimées en 'em' et en 'ex' sont relatives à celle de la propriété 'font-size', et les valeurs en pourcentage de la propriété 'vertical-align', relatives à celle de la propriété 'line-height'.
| Valeur : | baseline | sub | super | top | text-top | middle | bottom | text-bottom | <pourcentage> | <longueur> | inherit |
| Initiale : | baseline |
| S'applique à : | ceux des éléments de type en-ligne et à l'élément 'table-cell' |
| Héritée : | non |
| Pourcentage : | se rapporte à la valeur de la propriété 'line-height' de l'élément lui-même |
| Médias : | visuel |
Cette propriété agit sur le positionnement vertical à l'intérieur de la boîte de ligne des boîtes générées par un élément de type en-ligne. Les règles suivantes n'ont de sens que par rapport à un élément parent de type en-ligne, ou de type bloc si celui-ci génère des boîtes en-ligne anonymes ; elles sont inopérantes autrement.
Note : la signification des valeurs pour cette propriété est légèrement différente dans le contexte des tables. Consulter le chapitre traitant des algorithmes pour la hauteur des tables pour le détail.
Ces dernières valeurs se rapportent ` la boîte de ligne dans laquelle survient la boîte générée :