Éducation, société et technologie

CSS - Modèle de boîte

Dimensions et propriétés constituantes d’une boîte
lundi 2 mai 2005 par André Vincent

Comment les dimensions d’une boîte CSS sont elle établies. Quelles sont les diverses propriétés d’une boîte CSS ? Comment fonctionne le modèle des boîtes CSS ? Comment s’empilent les diverses couches d’une boîte ? Comment interagissent-elles ensemble ? Quelle est la différences entre le modèle de boîte standard et le modèle de boîte non-standard de Microsoft ?

Tout élément (X)HTML possédant une balise d’ouverture et une balise de fermeture délimitant un contenu, constitue une boîte déterminant des aires, qu’elles soient explicitement définies ou non par des règles CSS.

 Les propriétés constituantes d’une boîte

Chaque boîte possède une aire de contenu (ex. une texte, une image, etc.) entourée en option par une aire d’espacement - padding , une aire de bordure - border et une aire de marge - margin  ;

Le schéma suivant illustre les relations entre ces aires et la terminologie employée pour les désigner :

Le modèle des boîtes CSS2
Voir le détail des spécifications à : Le modèle des boîtes CSS2

À ces propriétés de d’espacement, de bordure et de marge, il faut ajouter une autre surface : l’aire d’arrière-plan - background . L’aire d’arrière-plan peut avoir deux types de valeur : une couleur et/ou une image d’arrière-plan. Dans les deux cas, l’aire d’arrière-plan couvre (en arrière-plan) la surface des aires de contenu + espacement + bordure.

Voici un schéma en 3 dimensions pour illustrer l’interaction de ces différentes propriétés ou couches.

Modèle de boîte CSS
Source : Antoine Cailliau

Voici une version animée (en anglais), de ces mêmes concepts : faire glisser le bouton « adjust perpective ».

Modèle de boîte CSS
[Source : RedMelon ]

 Largeur et hauteur d’une boîte

Règle générale, en l’absence de détermination d’une largeur ou d’une hauteur explicite, les dimensions d’une boîte seront variables et adopteront :

  1. pour un élément de type en ligne : la hauteur et la largeur de son propre contenu ;
  2. et 4. pour un élément de type bloc : la largeur du contenu de l’élément parent et la hauteur de son propre contenu ;
  3. pour un élément flottant de type bloc ou en ligne : la hauteur et la largeur de son propre contenu.

Exemple :

Élément 1 : de type en ligne

Élément 2 : de type bloc

Élément 3 : de type bloc flottant (float)
à l'intérieur de l'élément suivant

Élément 4 : de type bloc - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce volutpat lobortis urna. Fusce sed quam sed nibh mollis convallis. Nam in lacus. Duis non arcu id libero faucibus viverra. In hac habitasse platea dictumst. In sed nulla quis erat convallis pharetra. Mauris eros metus, aliquet et, hendrerit nec, mattis eget, libero. Pellentesque ultricies neque ac wisi. Curabitur porttitor lorem nec wisi. Quisque nulla. Quisque varius.

La largeur et/ou la hauteur d’une boîte peuvent aussi être fixées à l’aide des propriété width et height.

Le modèle standard

Dans le cas du modèle de boîte standard, width fixe la largeur du contenu. La dimension apparente de la boîte s’obtient donc en ajoutant à width les valeurs de l’espacement (padding) et de la bordure (border) ; en principe il faudrait aussi ajouter la valeur de la marge (margin), mais comme elle est toujours transparente, elle n’est donc pas apparente.

Le modèle non-standard ou modèle Microsoft

Dans le cas du modèle de boîte non-standard, width fixe la dimension apparente de la boîte ; donc, la valeur de width = la largeur du contenu + les valeurs de l’espacement (padding) + les valeurs de la bordure (border).

Les dimensions d’une boîte
Calcul des dimensions d’une boîte selon les modèles standard et non-standard.
Source : Listamatic - The IE box model and Doctype modes

Exemple :

 Exemple

Voici l’exemple d’un élément <div> auquel nous avons fixé une bordure de 20px, un espacement de 30px et une largeur de 300px.

div { 
  border:20px solid ;
  padding:30px ;
  background : #ffc ;
  width:300px ;
}

La largeur totale incluant les bordures et l’espace autour de l’élément devrait être de 400px.

20+30+300+30+20 = 400

Les agents utilisateurs qui interprètent mal [*] le modèle de boîte CSS en plaçant bordure et espacement à l’intérieur de la largeur spécifiée devraient donner un résultat d’une largeur totale de seulement 300px, et une largeur de contenu de seulement 200px.

300-20-30-30-20 = 200

Les barres aqua et rouge en dessous sont là pour fin de
comparaison. La présente boîte (incluant ses bordures) devrait être aussi large que la barre aqua.

lien
original
(seul lien de référence) • © copyright 2001 by Tantek Çelik. All rights reserved.

LARGEUR DU MODÈLE DE BOÎTE SRANDARD
LARGEUR DU MODÈLE DE BOÎTE MICROSOFT

 Techniques de corrections du modèle de boîte non-standard

Pour obtenir la même interprétation des dimensions d’une boîte, il est important de retenir les éléments suivants :

  • les marges (margin) d’une boîte sont rendues de la même façon dans les deux modèles de boîte et qu’ainsi, quelque soit leurs valeurs, elles ne posent pas de problème ;
  • une boîte dont on ne définit pas la largeur ni la hauteur ne pose pas de problème ;
  • une boîte dont on définit la largeur ou la hauteur, mais dont les bordures (border) et l’espacement (padding) sont fixés à 0, ne pose de problème ;
  • compte tenu de ce qui précède, si l’on désire définir à la fois la largeur ou la hauteur et une bordure ou un espacement, on peut alors procéder ainsi :
    1. créer une élément parent de type bloc dont on ne définit que la largeur et/ou la hauteur ;
    2. créer à l’intérieur de cet élément parent un élément enfant dont on définit la bordure et/ou l’espacement.
    3. ou vice-versa...

Cette dernière technique a le désavantage d’utiliser un élément parent supplémentaire qui parfois n’a pas de réel sens sinon de corriger une interprétaiton incorrecte faite par certains logiciels de navigation.

Il existe aussi diverses bidouilles (hack) pour résoudre ce problème. Toutes ces bidouilles exploitent un ou plusieurs bogues de certains navigateurs pour en fait corriger le bogue d’interprétation incorrecte du modèle de boîte standard. On exploite ainsi un bogue pour en corriger un autre. Pas très propre, mais ça fonctionne dans la vaste majorité des navigateurs.

Bien que ces bidouilles ne doivent être utilisées qu’en dernier recours, nous considérons, pour l’instant, que de toutes ces bidouilles, la technique à la fois la plus simple et la plus robuste en terme de compatibilité est :

[*Typiquement Internet Explorer pour Windows, version 5.0 et 5.5. La version 6 pour Windows et la version 5.x pour Mac, ne sont pas affectés à moins qu’un prologue XML ou une déclaration de < !DOCTYPE... ne les fassent basculer en mode non-standard.


Accueil | Contact | Plan du site | | Statistiques du site | Visiteurs : 31200 / 1816295

Suivre la vie du site fr  Suivre la vie du site Cours Web  Suivre la vie du site Sites web statiques  Suivre la vie du site CSS - Feuilles de styles   ?    |    titre sites syndiques OPML   ?

Site réalisé avec SPIP 3.1.4 + AHUNTSIC

Creative Commons License

Visiteurs connectés : 5