Spécifications CSS

10 Détails du modèle de mise en forme visuel

Contenu

10.1 Définition du "bloc conteneur"

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 :

Le bloc conteneur dans lequel se range l'élément racine (on l'appelle dans ce cas le bloc conteneur initial), est déterminé par l'agent utilisateur ;
Pour les autres éléments, sauf ceux en position absolue, le bloc conteneur est matérialisé par le bord du contenu de la boîte de type bloc de leur ancêtre le plus proche ;
Pour ceux des éléments avec une spécification 'position: fixed', le bloc conteneur est établi par la zone de visualisation ;
Pour ceux des éléments avec une spécification 'position: absolute', le bloc conteneur est établi par l'ancêtre le plus proche dont la valeur de la propriété 'position' est autre que 'static', de cette manière :
1. Quand l'ancêtre est un élément de type bloc, le bloc conteneur est matérialisé par le bord de l'espacement de cet ancêtre ;
2. Quand l'ancêtre est un élément de type en-ligne, le bloc conteneur dépend de la propriété 'direction'
  1. Si cette propriété a la valeur 'ltr', les bords du haut et de gauche du bloc conteneur se confondent avec ceux de la première boîte générée par cet ancêtre, et les bords du bas et de droite avec ceux de la dernière boîte générée par celui-ci ;
  2. Si cette propriété a la valeur 'rtl', les bords du haut et de droite du bloc conteneur se confondent avec ceux de la première boîte générée par cet ancêtre, et les bords du bas et de gauche avec ceux de la dernière boîte générée par celui-ci.
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").

10.2 La largeur du contenu : la propriété 'width'

'width'

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 :

<longueur>: Spécifie une largeur fixe ;
<pourcentage>: Spécifie une largeur en pourcentage. Le pourcentage est calculé en fonction de la largeur du bloc conteneur de la boîte générée ;
auto: La largeur dépend de celles d'autres propriétés. Voir plus loin.

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 }

10.3 Le calcul des largeurs et des marges

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 éléments de type en-ligne non remplacés
les éléments de type en-ligne remplacés
les éléments de type bloc non remplacés dans un flux normal
les éléments de type bloc remplacés dans un flux normal
les éléments flottants non remplacés
les éléments flottants remplacés
les éléments non remplacés en position absolue
les éléments remplacés en position absolue

Les points 1 à 6 incluent le positionnement relatif.

10.3.1 Les éléments de type en-ligne non remplacés

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'.

10.3.2 Les éléments de type en-ligne remplacés

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 la valeur spécifiée de la propriété 'width' est 'auto', sa valeur calculée est celle de la largeur intrinsèque de l'élément.~~ Si la valeur spécifiée de 'width' est 'auto' et que celle de la propriété 'height' est aussi 'auto', alors la largeur intrinsèque de l'élément prend la valeur calculée de 'width'. Si la valeur spécifiée de 'width' est 'auto' et que 'height' a une valeur spécifiée différente, alors la valeur calculée de 'width' correspond à : (largeur intrinsèque) * ( (hauteur calculée) / (hauteur intrinsèque) )

10.3.3 Les éléments de type bloc non remplacés dans un flux normal

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 ~~'ltr'~~ '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 plus loin les règles s'y rapportant dans la section 10.4.

10.3.4 Les éléments de type bloc remplacés dans un flux normal

Quand les propriétés 'left' ou 'right' ont la valeur 'auto', leur valeur calculée devient '0'. ~~Quand la valeur spécifiée de la propriété 'width' est 'auto', sa valeur calculée est celle de la largeur intrinsèque de l'élément.~~ Si la valeur spécifiée de 'width' est 'auto' et que celle de la propriété 'height' est aussi 'auto', alors la largeur intrinsèque de l'élément prend la valeur calculée de 'width'. Si la valeur spécifiée de 'width' est 'auto' et que 'height' a une valeur spécifiée différente, alors la valeur calculée de 'width' correspond à : (largeur intrinsèque) * ( (hauteur calculée) / (hauteur intrinsèque) ) 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) ).

10.3.5 Les éléments flottants non remplacés

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'.

10.3.6 Les éléments flottants remplacés

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'. ~~Quand la valeur spécifiée de la propriété 'width' est 'auto', sa valeur calculée est celle de la largeur intrinsèque de l'élément.~~ Si la valeur spécifiée de 'width' est 'auto' et que celle de la propriété 'height' est aussi 'auto', alors la largeur intrinsèque de l'élément prend la valeur calculée de 'width'. Si la valeur spécifiée de 'width' est 'auto' et que 'height' a une valeur spécifiée différente, alors la valeur calculée de 'width' correspond à : (largeur intrinsèque) * ( (hauteur calculée) / (hauteur intrinsèque) )

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) ).

10.3.7 Les éléments non remplacés en position absolue

« errata : Voir la proposition pour le nouveau calcul de la largeur »

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 :

Si la propriété 'left' a la valeur spécifiée 'auto' et la propriété 'direction' la valeur 'ltr', la valeur calculée de 'left' devient celle de la distance entre le bord gauche du bloc conteneur et le bord de la marge gauche d'une boîte hypothétique, celle-ci aurait été la première boîte de l'élément dont la propriété 'position' aurait eu la valeur 'static'. Les agents utilisateurs étant libres d'évaluer un emplacement probable de cette boîte, plutôt que d'en calculer l'emplacement effectif. Cette valeur peut être négative si cette boîte hypothétique se trouve à gauche du bord du bloc conteneur ;
Si la propriété 'right' a la valeur spécifiée 'auto' et la propriété 'direction' la valeur 'rtl', la valeur calculée de 'right' devient celle de la distance entre le bord droit du bloc conteneur et le bord de la marge droite de la boîte hypothétique, de la même manière que ci-dessus. Cette valeur peut être négative si cette boîte se trouve à droite du bord du bloc conteneur ;
Si la propriété 'width' a la valeur spécifiée 'auto', remplacer par '0' les valeurs 'auto' éventuelles des propriétés 'left' ou 'right' ;
Si les propriétés 'left', 'right' ou 'width' ont (encore) la valeur spécifiée 'auto', remplacer par '0' les valeurs 'auto' éventuelles des propriétés 'margin-left' ou 'margin-right' ;
Si, à ce stade, les propriétés 'margin-left' et 'margin-right' ont toujours la valeur 'auto', résoudre l'équation avec la contrainte supplémentaire que ces deux marges doivent avoir la même valeur ;
Si, à ce stade, il ne reste plus qu'une seule valeur 'auto', résoudre l'équation pour obtenir la valeur calculée de cette propriété ;
Si, à ce stade, les valeurs sont sur-contraintes, ignorer la valeur spécifiée pour la propriété 'left' (quand la propriété 'direction' a la valeur 'rtl'), ou celle de 'right' (quand la propriété 'direction' a la valeur 'ltr'), puis résoudre l'équation pour en obtenir la valeur calculée.

10.3.8 Les éléments remplacés en position absolue

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 :

~~Si la propriété 'width' a la valeur spécifiée 'auto', lui substituer la largeur intrinsèque de l'élément~~ Si la valeur spécifiée de 'width' est 'auto' et que celle de la propriété 'height' est aussi 'auto', alors la largeur intrinsèque de l'élément prend la valeur calculée de 'width'. Si la valeur spécifiée de 'width' est 'auto' et que 'height' a une valeur spécifiée différente, alors la valeur calculée de 'width' correspond à : (largeur intrinsèque) * ( (hauteur calculée) / (hauteur intrinsèque) ) ;
Si la propriété 'left' a la valeur 'auto' et la propriété 'direction' la valeur 'ltr', remplacer la valeur 'auto' par celle de la distance entre le bord gauche du bloc conteneur et le bord de la marge gauche d'une boîte hypothétique, celle-ci aurait été la première boîte d'un élément dont la propriété 'position' aurait été 'static'. Les agents utilisateurs étant libres d'évaluer un emplacement probable de cette boîte, plutôt que d'en calculer l'emplacement effectif. Cette valeur peut être négative si cette boîte hypothétique se trouve à gauche du bord du bloc conteneur ;
Si la propriété 'right' a la valeur 'auto' et la propriété 'direction' la valeur 'rtl', remplacer la valeur 'auto' par celle de la distance entre le bord droite du bloc conteneur et le bord de la marge droite d'une boîte hypothétique, de la même manière que ci-dessus. Cette valeur peut être négative si cette boîte se trouve à droite du bord du bloc conteneur ;
Si les propriétés 'left' ou 'right' ont la valeur 'auto', remplacer par '0' les valeurs 'auto' éventuelles des propriétés 'margin-left' ou 'margin-right' ;
Si, à ce stade, les propriétés 'margin-left' et 'margin-right' ont toutes deux la valeur 'auto', résoudre l'équation avec la contrainte supplémentaire que ces deux marges doivent avoir la même valeur ;
Si, à ce stade, il ne reste plus qu'une seule valeur 'auto', résoudre l'équation pour obtenir la valeur calculée de cette propriété ;
Si, à ce stade, les valeurs sont sur-contraintes, ignorer la valeur spécifiée pour la propriété 'left' (quand la propriété 'direction' a la valeur 'rtl'), ou celle de 'right' (quand la propriété 'direction' a la valeur 'ltr'), puis résoudre l'équation pour en obtenir la valeur calculée.

10.4 Les largeurs minimales et maximales : 'min-width' et 'max-width'

'min-width'

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

'max-width'

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 :

<longueur>: Spécifie une largeur calculée minimale ou maximale fixe ;
<pourcentage>: Spécifie un pourcentage pour déterminer la valeur calculée. Celui-ci est obtenu en fonction de la largeur du bloc conteneur ;
none: Aucune limite sur la largeur de la boîte (seulement pour 'max-width').

L'algorithme suivant décrit l'action de ces deux propriétés pour obtenir la valeur calculée de la propriété 'width' :

La largeur est calculée (sans l'intervention des propriétés 'min-width' et 'max-width'), selon les règles définies plus haut dans "Le calcul des largeurs et des marges" ;
Si la valeur calculée de 'min-width' est supérieure à celle de 'max-width', la propriété 'max-width' prend la valeur de 'min-width' ;
Si la largeur calculée est supérieure à la valeur de 'max-width', les règles de calcul des largeurs et marges sont appliquées à nouveau, en utilisant cette fois la valeur de 'max-width' comme valeur spécifiée pour la propriété 'width' ;
Si la largeur calculée est inférieure à la valeur de 'min-width', les mêmes règles sont appliquées à nouveau, en utilisant cette fois-ci la valeur de 'min-width' comme valeur spécifiée pour 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.

10.5 La hauteur du contenu : la propriété 'height'

'height'

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.

É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 :

<longueur>: Spécifie une hauteur fixe ;
<pourcentage>: Spécifie une hauteur en pourcentage. Celui-ci est calculé en fonction du bloc conteneur de la boîte générée. Si la hauteur du bloc conteneur n'est pas spécifiée explicitement (c.à.d., celle-ci dépendant de la hauteur du contenu), sa valeur est considérée comme étant 'auto' ;
auto: La hauteur dépend des valeurs des autres propriétés. Voir les explications plus loin.

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'.

10.6 Le calcul des hauteurs et des marges

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 éléments de type en-ligne non remplacés
les éléments de type en-ligne remplacés
les éléments de type bloc non remplacés dans un flux normal
les éléments de type bloc remplacés dans un flux normal
les éléments flottants non remplacés
les éléments flottants remplacés
les éléments non remplacés en position absolue
les éléments remplacés en position absolue

Les points 1 à 6 incluent le positionnement relatif.

10.6.1 Les éléments de type en-ligne non remplacés

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. Par contre, le calcul de la hauteur de la boîte de la ligne emploie 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.

10.6.2 Les éléments de types en-ligne et bloc remplacés dans un flux normal et éléments flottants remplacés

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 valeur de la propriété 'height' est 'auto', sa valeur calculée est la hauteur intrinsèque de l'élément.~~ Si les propriétés 'width' et 'height' ont toutes deux la valeur spécifiée 'auto', la hauteur intrinsèque de l'élément correspond à la valeur calculée de 'width'. 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 'height' correspond à : (hauteur intrinsèque) * ( (largeur calculée) / (largeur intrinsèque) ).

10.6.3 Les éléments de type bloc non remplacés dans un flux normal et éléments flottants non remplacés

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 de la présence d'un éventuel enfant de type bloc et des espacements et bordures de l'élément.

Si l'élément a uniquement des enfants de type en-ligne, sa hauteur est égale à la distance entre le sommet de la boîte de ligne la plus haute et le bas de celle la plus basse.

S'il a des enfants de type bloc, la hauteur est la distance entre le bord de la bordure haute de la boîte de l'enfant de type bloc en haut et le bord de la bordure du bas de la boîte de l'enfant de type bloc en bas. Toutefois, si l'élément a un espacement haut et/ou une bordure haute non nuls, alors le contenu commence au bord de la marge haute de l'enfant le plus haut. De même, si l'élément a un espacement bas et/ou une bordure basse non nuls, alors le contenu finit au bord de la marge basse de l'enfant le plus 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.

10.6.4 Les éléments non remplacés en position absolue

« errata : Voir la proposition pour le nouveau calcul de la hauteur »

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.

Si la propriété 'top' a la valeur spécifiée 'auto', la remplacer par la distance entre le bord haut du bloc conteneur et le bord de la marge haute d'une boîte hypothétique, celle-ci aurait été la première boîte de l'élément dont la propriété 'position' aurait eu la valeur 'static'. Les agents utilisateurs étant libres d'évaluer un emplacement probable de cette boîte, plutôt que d'en calculer l'emplacement effectif. Cette valeur peut être négative si cette boîte hypothétique se trouve au-dessus du bord du bloc conteneur ;
Si les propriétés 'height' et 'bottom' ont toutes deux la valeur spécifiée 'auto', remplacer celle de 'bottom' par '0' ;
Si les propriétés 'bottom' ou 'height' ont toujours la valeur 'auto', remplacer par '0' les valeurs 'auto' éventuelles des propriétés 'margin-top' ou 'margin-bottom' ;
Si, à ce stade, les propriétés 'margin-top' et 'margin-bottom' ont toujours la valeur 'auto', résoudre l'équation avec la contrainte supplémentaire que ces deux marges doivent avoir la même valeur ;
Si, à ce stade, il ne reste plus qu'une seule valeur 'auto', résoudre l'équation pour obtenir la valeur calculée de cette propriété ;
Si, à ce stade, les valeurs sont sur-contraintes, ignorer la valeur spécifiée pour la propriété 'bottom' et résoudre l'équation pour en obtenir la valeur calculée.

10.6.5 Les éléments remplacés en position absolue

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 :

~~Si la valeur de la propriété 'height' est 'auto', sa valeur calculée est la hauteur intrinsèque de l'élément.~~ Si les propriétés 'width' et 'height' ont toutes deux la valeur spécifiée 'auto', la hauteur intrinsèque de l'élément correspond à la valeur calculée de 'width'. 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 'height' correspond à : (hauteur intrinsèque) * ( (largeur calculée) / (largeur intrinsèque) ) ;
Si la propriété 'top' a la valeur spécifiée 'auto', la remplacer par la distance entre le bord haut du bloc conteneur et le bord de la marge haute d'une boîte hypothétique, celle-ci aurait été la première boîte de l'élément dont la propriété 'position' aurait eu la valeur 'static'. Les agents utilisateurs étant libres d'évaluer un emplacement probable de cette boîte, plutôt que d'en calculer l'emplacement effectif. Cette valeur peut être négative si cette boîte hypothétique se trouve au-dessus du bord du bloc conteneur ;
Si la propriété 'bottom' a la valeur 'auto', remplacer par '0' les valeurs 'auto' éventuelles des propriétés 'margin-top' ou 'margin-bottom' ;
Si, à ce stade, les propriétés 'margin-top' et 'margin-bottom' ont toujours la valeur 'auto', résoudre l'équation avec la contrainte supplémentaire que ces deux marges doivent avoir la même valeur ;
Si, à ce stade, il ne reste plus qu'une seule valeur 'auto', résoudre l'équation pour obtenir la valeur calculée de cette propriété ;
Si, à ce stade, les valeurs sont sur-contraintes, ignorer la valeur spécifiée pour la propriété 'bottom' et résoudre l'équation pour en obtenir la valeur calculée.

10.7 Les hauteurs minimales et maximales : 'min-height' et 'max-height'

Il est parfois utile de restreindre la hauteur d'un élément dans certaines proportions. Deux propriétés offrent cette fonctionnalité :

'min-height'

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

'max-height'

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 :

<longueur>: Spécifie une hauteur calculée minimale ou maximale fixe ;
<pourcentage>: Spécifie un pourcentage pour déterminer la valeur calculée. Celui-ci est obtenu en fonction de la hauteur du bloc conteneur. Si la hauteur du bloc conteneur n'est pas spécifiée explicitement (c.à.d. celle-ci dépendant de la hauteur du contenu), sa valeur est considérée comme étant 'auto' ;
none: Aucune limite sur la hauteur de la boîte (seulement pour 'max-height').

L'algorithme suivant décrit l'action de ces deux propriétés pour obtenir la valeur calculée de la propriété 'height' :

La hauteur est calculée, sans l'intervention des propriétés ('min-height' et 'max-height'), selon les règles définies plus haut dans "Le calcul des hauteurs et des marges" ;
Si la valeur calculée de 'min-height' est supérieure à celle de 'max-height', la propriété 'max-height' prend la valeur de 'min-height' ;
Si la hauteur calculée est supérieure à la valeur de 'max-height', les règles de calcul des hauteurs et marges sont appliquées à nouveau, en utilisant cette fois la valeur de 'max-height' comme valeur spécifiée pour la propriété 'height' ;
Si la hauteur calculée est inférieure à la valeur de 'min-height', les mêmes règles sont appliquées à nouveau, en utilisant cette fois-ci la valeur de 'min-height' comme valeur spécifiée pour la propriété 'height'.

10.8 Le calcul de la hauteur de ligne : les propriétés 'line-height' et 'vertical-align'

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 :

On calcule la hauteur de chaque boîte en-ligne contenues dans la boîte de ligne (voir "Le calcul des hauteurs et des marges" ainsi que la propriété 'line-height') ;
Puis on aligne ces boîtes en-ligne verticalement en fonction de la valeur de leur propriété 'vertical-align' ;
La hauteur de la boîte de ligne correspond à la distance entre le haut de la boîte la plus élevée et le bas de celle la plus basse.

Les éléments en-ligne vides engendrent des boîtes en-ligne vides, 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.

10.8.1 L'interlignage et le demi-interlignage

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).

'line-height'

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 T_EX 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 :

normal: Indique aux agents utilisateurs une valeur calculée "raisonnable", basée sur la taille de la police de l'élément. Cette valeur revêt la même signification que <number>. On recommande pour 'normal' une valeur calculée entre 1.0 et 1.2 ;
<longueur>: Cette longueur est appliquée à la hauteur de la boîte. Les valeurs négatives ne sont pas admises ;
<nombre>: La valeur calculée de la propriété est obtenue en multipliant ce nombre par la taille de la police de l'élément. Les valeurs négatives ne sont pas admises. Cependant, ce nombre est hérité, et non la valeur calculée ;
<pourcentage>: La valeur calculée de la propriété correspond à ce pourcentage multipliée par la valeur calculée pour la taille de la police. Les valeurs négatives ne sont pas admises.

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~~. La propriété 'font-size' sert toutefois à définir les unités 'em' et 'ex' et la propriété 'line-height' influence la propriété 'vertical-align'~~ : 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'.

'vertical-align'

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.

baseline: Aligne la ligne de base d'une boîte avec celle de son parent. Si la boîte en est dépourvue, aligner le bas de celle-ci avec la ligne de base de son parent ;
middle: Aligne le milieu vertical de la boîte avec la ligne de base de la boîte de son parent, ce milieu étant augmenté de la moitié de la valeur de la propriété 'x-height' du parent ;
sub: Abaisse la ligne de base de la boîte à la position appropriée pour une écriture en indice dans la boîte du parent. Cette valeur n'a pas d'effet sur la taille de la police de texte de l'élément ;
super: Élève la ligne de base de la boîte à la position appropriée pour une écriture en exposant dans la boîte du parent. Cette valeur n'a pas d'effet sur la taille de la police de texte de l'élément ;
text-top: Aligne le haut de la boîte avec le haut du texte de l'élément parent ;
text-bottom: Aligne le bas de la boîte avec le bas du texte de l'élément parent ;
<pourcentage>: Élève (pour une valeur positive) ou abaisse (pour une valeur négative) la boîte de ce pourcentage (qui se rapporte à la valeur de la propriété 'line-height'). La valeur '0%' signifie la même chose que 'baseline' ;
<longueur>: Élève (pour une valeur positive) ou abaisse (pour une valeur négative) la boîte de cette quantité. La valeur '0cm' signifie la même chose que 'baseline'.

Ces dernières valeurs se rapportent ` la boîte de ligne dans laquelle survient la boîte générée :

top: Aligne le haut de la boîte avec le haut de la boîte de ligne ;
bottom: Aligne le bas de la boîte avec le bas de la boîte de ligne.

Version en cache

21/12/2024 12:56:08 Cette version de la page est en cache (à la date du 21/12/2024 12:56:08) afin d'accélérer le traitement. Vous pouvez activer le mode utilisateur dans le menu en haut pour afficher la dernère version de la page.

Document créé le 12/08/2006, dernière modification le 26/10/2018
Source du document imprimé : https://www.gaudry.be/css-rf-visudet.html

L'infobrol est un site personnel dont le contenu n'engage que moi. Le texte est mis à disposition sous licence CreativeCommons(BY-NC-SA). Plus d'info sur les conditions d'utilisation et sur l'auteur.

Notes

↑ W3C : World Wide Web consortium
↑ Avertissement Légal : Bien que repectant de trè près le document original, cette traduction n'est pas une version française agréée par le W3C

Table des matières Haut

Références

Spécifications CSS : http://www.yoyodesign.org, Détails du modèle de mise en f

Ces références et liens indiquent des documents consultés lors de la rédaction de cette page, ou qui peuvent apporter un complément d'information, mais les auteurs de ces sources ne peuvent être tenus responsables du contenu de cette page.
L'auteur de ce site est seul responsable de la manière dont sont présentés ici les différents concepts, et des libertés qui sont prises avec les ouvrages de référence. N'oubliez pas que vous devez croiser les informations de sources multiples afin de diminuer les risques d'erreurs.

Table des matières Haut