Le 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é quand on parle de la conception et la mise en page.
Le modèle de boîte CSS est essentiellement une boîte qui entoure tous les éléments HTML. Il se compose de: marges, les frontières, 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
- Border - Une frontière qui va autour du rembourrage et le contenu
- Marge - Efface une zone en dehors 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
div {
width: 300px;
padding: 25px;
border: 25px solid navy;
margin: 25px;
} Essayez - le vous - même » Largeur et hauteur d'un élément
Afin de définir la largeur et la hauteur d'un élément correctement dans tous les navigateurs, vous devez savoir comment le modèle de boîte fonctionne.
 | Important: Lorsque vous définissez les propriétés de largeur et de hauteur d'un élément avec CSS, vous venez de définir la largeur et la hauteur de la zone de contenu.Pour calculer la taille totale d'un élément, vous devez également ajouter rembourrage, les frontières et les marges. |
|---|
Supposons que nous voulons le style d' un <div> élément pour avoir une largeur totale de 350px:
Exemple
div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
} Essayez - le vous - même » Voici le calcul:
La largeur totale d'un élément doit être calculé comme suit:
Largeur totale de l'élément = largeur + padding gauche + padding droite + bordure gauche + bordure droite + marge gauche + marge droite
La hauteur totale d'un élément doit être calculé comme suit:
Hauteur totale de l'élément = hauteur + haut + padding padding fond + bordure supérieure + bordure inférieure + marge supérieure + marge inférieure
| Note pour les vieux IE: Internet Explorer 8 et les versions antérieures, y compris le rembourrage et la bordure dans la width propriété. Pour résoudre ce problème, ajoutez un <!DOCTYPE html> à la page HTML. |
|---|
Testez-vous avec des exercices!
Exercice 1 » Exercice 2» Exercice 3 » Exercice 4»