CSS Modèle de Boîte
Le Modèle de Boîte CSS
En CSS, le terme "modèle de boîte" est utilisé pour parler de design et de mise en page web.
Le modèle de boîte CSS est essentiellement une boîte qui entoure chaque élément HTML.
Chaque boîte se compose de quatre parties : le contenu, le remplissage, les bordures et les marges.
L'image ci-dessous illustre le modèle de boîte CSS :
Explication des différentes parties (de la plus intérieure à la plus extérieure) :
- Contenu - Le contenu de la boîte, où le texte et les images apparaissent
- Remplissage - Dégage une zone autour du contenu. Le remplissage est transparent
- Bordure - Une bordure qui entoure le remplissage et le contenu
- Marge - Dégage une zone à l'extérieur de la bordure. 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 eux.
Exemple
Démonstration du modèle de boîte :
div {
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
} Largeur et Hauteur d'un Élément
Pour définir correctement la largeur et la hauteur d'un élément dans tous les navigateurs, vous devez comprendre comment fonctionne le modèle de boîte.
Important : Lorsque vous définissez les propriétés de largeur et de hauteur d'un élément avec CSS, vous ne définissez que la largeur et la hauteur de la zone de contenu . Pour calculer la largeur et la hauteur totales d'un élément, vous devez également inclure le remplissage et les bordures.
Exemple
Cet élément <div> aura une largeur totale de 350px et une hauteur totale de 80px :
div {
width: 320px;
height: 50px;
padding: 10px;
border: 5px solid gray;
margin: 0;
} Voici le calcul :
La largeur totale d'un élément doit être calculée comme suit :
Largeur totale de l'élément = largeur + remplissage gauche + remplissage droit + bordure gauche + bordure droite
La hauteur totale d'un élément doit être calculée comme suit :
Hauteur totale de l'élément = hauteur + remplissage supérieur + remplissage inférieur + bordure supérieure + bordure inférieure
Remarque : La propriété de marge affecte également l'espace total que la boîte occupera sur la page, mais la marge n'est pas incluse dans la taille réelle de la boîte. La largeur et la hauteur totales de la boîte s'arrêtent à la bordure.