CSS Modèle de boîte

Modèle de boîte CSS

Tous les éléments HTML peuvent être considérés comme des boîtes. En CSS, le terme « modèle de boîte » est utilisé pour la conception et la mise en page.

Le modèle de boîte CSS est essentiellement une boîte qui entoure les éléments HTML. Il comprend : les marges, les bordures, le padding et le contenu réel.

Le modèle de boîte nous permet de placer des éléments dans l'espace entre les autres éléments et les bordures des éléments environnants.

L'image suivante illustre le modèle de boîte :

Explication des différentes parties :

• Marge- Efface la zone à l'extérieur de la bordure ; la marge est transparente.
• Bordure- Une bordure qui entoure le remplissage et le contenu.
• Remplissage- Efface la zone autour du contenu ; le remplissage est transparent.
• Contenu- Le contenu de la boîte, où le texte et les images apparaissent.

Pour définir correctement la largeur et la hauteur d'un élément dans tous les navigateurs, vous devez savoir comment fonctionne le modèle de boîte.

Largeur et hauteur d'un élément

Important :Lorsque vous spécifiez les propriétés width et height d'un élément CSS, vous ne définissez que la largeur et la hauteur de la zone de contenu. Pour connaître la taille totale de l'élément, vous devez également ajouter du remplissage, des bordures et des marges.

La largeur totale de l'élément dans l'exemple ci-dessous est de 450px :

Calculons-le nous-mêmes :
300px (largeur)
+ 50px (padding à gauche + à droite)
+ 50px (bordure gauche + droite)
+ 50px (marge gauche + droite)
= 450px

Imaginez que vous ne disposez que de 250 pixels d'espace. Définissons un élément d'une largeur totale de 250 pixels :

La formule de calcul de la largeur totale de l'élément final est la suivante :

Largeur totale de l'élément = width + padding à gauche + padding à droite + bordure gauche + bordure droite + marge gauche + marge droite

La formule finale de calcul de la hauteur totale de l'élément est la suivante :

Hauteur totale de l'élément = height + padding en haut + padding en bas + bordure supérieure + bordure inférieure + marge supérieure + marge inférieure

Problèmes de compatibilité des navigateurs

Une fois qu'une DTD appropriée est définie pour la page, la plupart des navigateurs afficheront le contenu conformément à l'illustration ci-dessus. Toutefois, IE 5 et 6 l'affichent incorrectement. Selon la spécification du W3C, l'espace occupé par le contenu de l'élément est défini par la propriété width, tandis que les valeurs de padding et de border autour du contenu sont calculées séparément. Malheureusement, IE5.x et 6 utilisent leur propre modèle non standard en mode quirks. La propriété width de ces navigateurs n'est pas la largeur du contenu, mais la somme des largeurs du contenu, du padding et des bordures.

Bien qu'il existe des méthodes pour résoudre ce problème, la meilleure solution actuellement est de l'éviter. C'est-à-dire, n'ajoutez pas de padding avec une largeur spécifiée à un élément, mais essayez plutôt d'ajouter du padding ou du margin au parent et aux éléments enfants de l'élément.

IE8 et les versions antérieures d'IE ne prennent pas en charge la définition des propriétés width du padding et de la border.

Pour résoudre le problème d'incompatibilité avec IE8 et les versions antérieures, il suffit de déclarer <!DOCTYPE html> dans la page HTML.