Modèle de boîte CSS
Tous les éléments HTML peuvent être considérés comme des boîtes.
Le modèle de boîte CSS
En CSS, le terme “modèle de boîte” est utilisé pour parler de conception et de mise en page.
Le modèle de boîte CSS est essentiellement une boîte qui entoure chaque élément HTML. Il comprend : les marges, les bordures, le rembourrage et le contenu réel. L’image ci-dessous illustre le modèle de boîte :
Explication des différentes parties :
- Contenu – Le contenu de la boîte, où le texte et les images apparaissent
- Rembourrage – Efface une zone autour du contenu. Le rembourrage est transparent
- Frontière – Une bordure qui fait le tour du padding et du contenu
- Marge – Efface une zone à l’extérieur de la frontière. La marge est transparente
Le modèle de boîte nous permet d’ajouter une bordure autour des éléments et de définir l’espace entre les éléments.
Exemple
Démonstration du modèle de boîte :
div {
largeur : 300 pixels ;
bordure : 15px vert solide ;
rembourrage : 50px ;
marge : 20px ;
}
Essayez-le vous-même »
Largeur et hauteur d’un élément
Afin de 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.
Important: Lorsque vous définissez les propriétés width et height d’un élément avec CSS, il vous suffit de définir la largeur et la hauteur du zone de contenu. Pour calculer la taille complète d’un élément, vous devez également ajouter un rembourrage, des bordures et des marges.
Exemple
Cet élément
div {
largeur : 320 pixels ;
rembourrage : 10px ;
bordure : 5 pixels gris uni ;
marge : 0 ;
}
Essayez-le vous-même »
Voici le calcul :
320px (largeur)
+ 20px (gauche + rembourrage droit)
+ 10px (bordure gauche + droite)
+ 0px (marge gauche + droite)
= 350px
La largeur totale d’un élément doit être calculée comme suit :
Largeur totale de l’élément = largeur + rembourrage gauche + rembourrage droit + bordure gauche + bordure droite + marge gauche + marge droite
La hauteur totale d’un élément doit être calculée comme ceci :
Hauteur totale de l’élément = hauteur + rembourrage supérieur + rembourrage inférieur + bordure supérieure + bordure inférieure + marge supérieure + marge inférieure
#Modèle #boîte #CSS