Qu'est-ce que le Modèle de boîte ?
Fait partie de la section Styling with CSS du Journey HTML de Coddy — leçon 33 sur 76.
En CSS, chaque élément HTML est traité comme une boîte rectangulaire, suivant le Modèle de Boîte. Ce modèle se compose de quatre parties principales :
- Contenu – Le texte réel, l'image ou tout autre contenu à l'intérieur de la boîte.
- Padding – Espace entre le contenu et la bordure. Il augmente la taille de l'élément mais conserve la couleur d'arrière-plan à l'intérieur.
- Bordure – Une ligne qui entoure la marge intérieure (padding) et le contenu. Elle peut avoir différents styles, couleurs et largeurs.
- Margin – Espace à l'extérieur de la bordure qui sépare l'élément des autres éléments.
Comprendre le modèle de boîte aide à contrôler l'espacement et la mise en page en conception web ! 🚀
Aide-mémoire
Le Modèle de Boîte CSS traite chaque élément HTML comme une boîte rectangulaire composée de quatre parties :
- Contenu – Le texte, l'image ou tout autre contenu réel à l'intérieur de la boîte
- Padding – L'espace entre le contenu et la bordure
- Bordure – Une ligne qui entoure le padding et le contenu
- Marge – L'espace à l'extérieur de la bordure qui sépare l'élément des autres éléments
Essayez vous-même
Cette leçon ne comprend pas de défi de code.
Testez-vousCette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.
Toutes les leçons de Styling with CSS
4Les bases du texte
Couleur du texteFamille de policesTaille de policeGraisse de policeAlignement du texteDécoration du texteDéfi récapitulatif n°1Défi récapitulatif n°27Modèle de boîte - Partie 1
Qu'est-ce que le Modèle de boîte ?PaddingMargesBorduresLargeur et HauteurDéfi récapitulatif
5Couleurs et arrière-plans
Couleur d'arrière-planCouleurs HEXCouleurs RGBTransparence avec RGBADéfi récapitulatif n°1