Modèle de boîte CSS
- Page précédente Hauteur / largeur CSS
- Page suivante Profil CSS
Modèle de boîte CSS
Tous les éléments HTML peuvent être considérés comme des boîtes. En CSS, lors de la discussion sur le design et l'agencement, on utilise les termes "modèle de boîte" ou "modèle de cadre".
Le modèle de boîte CSS est en réalité une boîte qui enveloppe chaque élément HTML. Il comprend : la marge externe, la bordure, la marge intérieure et le contenu réel. La figure suivante montre le modèle de boîte :
Explications des différentes parties :
- Contenu - Le contenu de la boîte, où sont affichés le texte et les images.
- Marge intérieure - Effacer la zone autour du contenu. La marge intérieure est transparente.
- Bordure - Bordure autour de la marge intérieure et du contenu.
- Marge externe - Effacer la zone au-delà des limites. La marge est transparente.
Le modèle de boîte nous permet d'ajouter des bordures autour des éléments et de définir l'espace entre les éléments.
La partie la plus interne de la boîte de l'élément est le contenu réel, entouré directement par la marge intérieure. La marge intérieure présente le fond de l'élément. Les bords de la marge intérieure sont les bordures. Au-delà des bordures, il y a la marge externe, qui est transparente par défaut et ne cache pas les éléments derrière elle.
Astuce :Le fond est appliqué à la zone composée du contenu et de la marge intérieure, de la bordure.
La marge intérieure, la bordure et la marge sont optionnelles et leur valeur par défaut est zéro. Cependant, de nombreux éléments seront définis par les styles des tables d'agents utilisateur. Vous pouvez couvrir ces styles de navigateur en définissant la marge et la marge intérieure de l'élément sur zéro. Cela peut être fait séparément ou en utilisant un sélecteur universel pour tous les éléments :
* {
marge: 0;
marge intérieure: 0;
}
Dans CSS, width et height font référence à la largeur et à la hauteur de la zone de contenu. L'ajout de la marge intérieure, de la bordure et de la marge n'affecte pas la taille de la zone de contenu, mais augmente la taille totale de la boîte de l'élément.
Supposons que chaque côté de la boîte ait une marge externe de 10 pixels et une marge intérieure de 5 pixels. Si vous souhaitez que cette boîte d'élément atteigne 100 pixels, vous devez définir la largeur du contenu sur 70 pixels, voir l'image suivante :
#box {
largeur: 70px;
marge: 10px;
marge intérieure: 5px;
}
Astuce :La marge intérieure, la bordure et la marge peuvent être appliquées à tous les côtés d'un élément ou à un côté seul.
Astuce :Les marges peuvent être négatives et sont souvent utilisées avec des marges négatives.
Exemple
Démo du modèle de boîte :
div {
largeur: 300px;
bordure: 15px solide vert;
marge intérieure: 50px;
marge: 20px;
}
Largeur et hauteur de l'élément
Pour configurer correctement la largeur et la hauteur des éléments dans tous les navigateurs, vous devez comprendre comment fonctionne le modèle de boîte.
Remarque importante :Lorsque vous configurez les propriétés width et height d'un élément à l'aide de CSS, il suffit de définir la largeur et la hauteur de la zone de contenu. Pour calculer la taille complète de l'élément, il est nécessaire d'ajouter la marge interne, la bordure et la marge externe.
Exemple
<div> La largeur totale de l'élément sera de 350px :
div {
largeur: 320px;
marge intérieure: 10px;
bord: 5px solid gray;
marge: 0;
}
Calcul comme suit :
320px (largeur) + 20px (marge interne gauche + droite) + 10px (bord gauche + droit) + 0px (marge externe gauche + droite) = 350px
La largeur totale de l'élément doit être calculée ainsi :
Largeur totale de l'élément = largeur + marge interne gauche + marge interne droite + bord gauche + bord droit + marge externe gauche + marge externe droite
La hauteur totale de l'élément doit être calculée ainsi :
Hauteur totale de l'élément = hauteur + marge interne supérieure + marge interne inférieure + bord supérieur + bord inférieur + marge externe supérieure + marge externe inférieure
- Page précédente Hauteur / largeur CSS
- Page suivante Profil CSS
