Contenu | Menu | Rechercher :
Le réseau des étudiants | Contact
Vous êtes ici : Le réseau social des étudiants ==> >Modèle des boîtes CSS

>Modèle des boîtes CSS

Le modèle des boîtes CSS constitue l'une des notions les plus importantes dans les CSS. Du fait que ça permet de comprendre facilement le comportement des boîtes et le fonctionnement des propriétés CSS margin, border et padding, qu'on va aborder juste après avoir complété ce chapitre, lorsque vous serez bien préparés

Introduction au modèle de boîtes CSS

Avant de reprendre l'apprentissage des autres propriétés CSS, on va parler un petit peu du modèle de boîtes CSS, selon lequel chaque élément de la page (paragraphe, citation, titre, image, listes, tableaux etc.) se présente ainsi :

Après tous ça, le navigateur affiche les éléments voisins qui eux aussi ont un contenu, des marges internes et externes et des bordures. Voici un schéma qui récapitule ce qu'on vient de voir : css

Les navigateurs ne reconnaissent pas de standards en matière des valeurs par défaut des propriétés CSS padding, margin et border. Chaque navigateur applique des valeurs initiales qui lui semblent bonnes, ce qui peut conduire à des sorties visuelles qui diffèrent d'un browser à l'autre.

Par défaut les navigateurs n'affichent pas de bordures pour les éléments XHTML (à part certains, comme les images cliquables et les séparateurs). Tous les éléments de type bloc ont des marges internes et externes, y compris le méga-bloc <body>. Le seul élément qui échappe à cette règle est la balise universelle div qui a un padding et un margin nuls.

La taille d'une boîte est égale à la largeur de l'élément (texte, image etc.) et de l'espacement intérieur, auquel on ajoute la bordure et les marges.

Le modèle des boîtes (box model) CSS à la loupe

Pour appréhender d'une façon plus subtile le modèle des boîtes CSS, je vous ai préparé le schéma suivant où vous pouvez facilement identifier les différents éléments constitutifs du "box model" :

le modèles des boîtes CSS (box model)

Commentaires

Le model de boîtes CSS standard et le mode quirks

Les anciens navigateurs travaillent sous le mode communément appelé quirks (quirks : excentricité ou habitude bizarre), telles que les versions 5.0 et 5.5 d'Internet Explorer. Le navigateur Microsoft 6 et 7 peuvent aussi basculer du mode standard spécifié dans la recommandation du W3C au mode quirks dans le cas où un DTD n'a pas été spécifié ou a été défini mais d'une manière erronée.

Sous le mode quirks qui est propre à Microsoft, les navigateurs interprètent les mentions de marges (margin), d'espacement (padding) et des bordures (border) de manière erronée. En fait, les navigateurs tournant sous le mode quirks ajoutent le 'margin', le 'padding' et le 'border' à la largeur de la boîte, ce qui n'est pas conforme aux standards du W3C, qui selon eux, les padding et les bordures doivent être ajoutés en dehors de la boîte, pour éviter de comprimer la largeur du texte.

Pour vous approcher de la réalité, remarquez l'exemple suivant :

<p style="width: 300px; border: solid; padding: 80px;">
Le paragraphe</p>

Aperçu sous le mode quirks (Internet Explorer, DTD non spécifié)

Comme vous pouvez le constater, Internet Explorer sous le mode quirks, incorpore tout bonnement les padding et les bordures dans la valeur de la propriété CSS width. La largeur de la boîte sera rendu plus petite, et la longueur du texte sera comprimée. Car les padding horizontaux et les bordures seront ajoutés au détriment de la largeur de la boîte, dont la valeur demeure égale à 300 pixels.

Au niveau de la hauteur de la boîte je n'ai rien remarqué de spécial, car la hauteur du conteneur suit celle du contenu (texte etc.). Mais j'ai constaté que sous le mode quirks, le navigateur incorpore les padding dans la largeur de la boîte, tant que celle-ci peut les supporter. Mais lorsque les deux padding horizontaux dépassent la largeur de la boîte (ou s'approchent d'elle), le navigateur est obligé d'élargir la boîte.

Aperçu sous le mode standard

Un navigateur tournant sous le mode standard, n'incorpore pas les padding horizontaux et les bordures dans la valeur de la propriété CSS width, mais il les ajoute en dehors de la boîte, ce qui permet de ne pas affecter la largeur du texte. Sous le mode standard la largeur de la boîte du même exemple sera égale à 300 + 80 + 80 + 3 + 3 = 466 pixels. Les 3 pixels correspondent à la taille de la bordure (valeur initiale : medium = 3 pixels).

Le mode quirks ne gère pas non plus les marges auto, ce qui fait que le centrage horizontal par la propriété CSS margin avec la valeur auto n'opère pas sous le mode quirks. Bon, ce qui importe ce n'est pas vraiment de comprendre le fonctionnement du mode quirks, mais plutôt essayer de l'éviter en spécifiant un DTD conforme aux standards W3C

Chapitre suivant : la propriété CSS padding (espacement interne).

Cacher ce panneau   Accéder à la version étendue du chat

Cacher ce panneau