Historique des conversations
Chargement...
Chapitre 5 : Le modèle de boîte (Box Model)
1. Qu’est-ce que le Box Model ?
En CSS, chaque élément HTML est considéré comme une boîte rectangulaire. Cette boîte est composée de plusieurs couches :
- Le contenu : texte, image, ou autre contenu réel
- Le padding : l’espace autour du contenu, à l’intérieur de la bordure
- La bordure (border) : contour autour de l’élément
- La marge (margin) : espace extérieur entre cet élément et les autres
C’est ce qu’on appelle le modèle de boîte.
2. Visualisation du modèle
Voici une représentation visuelle :
Source : MDN
3. Exemple CSS
.carte {
width: 300px;
padding: 20px;
border: 2px solid #000;
margin: 30px;
}<div class="carte">
Contenu de la carte
</div>4. Propriétés associées
padding,padding-top,padding-left...margin,margin-bottom...border,border-width,border-color...width,heightpour la taille du contenu
5. La propriété box-sizing
Par défaut, la taille d’un élément n’inclut pas le padding et la bordure. Pour un calcul plus intuitif, on peut utiliser :
* {
box-sizing: border-box;
}Cela indique au navigateur que le padding et la bordure doivent être inclus dans la largeur définie.
Conclusion
Maîtriser le modèle de boîte te permettra de mieux contrôler les espacements, les tailles et la disposition des éléments.
Dans le prochain chapitre, nous allons aborder les types d'affichage CSS : block, inline, inline-block, etc.
Évaluation des acquis
Correction immédiate
Quiz du chapitre 5
Ateliers pratiques & Projets
Testez vos compétences avec nos exercices guidés et le tuteur IA.
Ateliers pratiques & Corrigés détaillés
Ateliers pratiques & Corrigés
#1 — Bordure
Atelier #1Ajoute une bordure de 2px solide et grise à une image.
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
img {
border: 2px solid gray;
}
#2 — Padding
Atelier #2Ajoute une marge interne de 15px de tous les côtés pour la classe 'card'.
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
.card {
padding: 15px;
}
#3 — Margin Auto
Atelier #3Centre horizontalement un bloc de 500px de large en utilisant les marges.
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
.container {
width: 500px;
margin: 0 auto;
}
#4 — Box-sizing
Atelier #4Force le modèle de boîte à inclure le padding et la bordure dans la largeur totale.
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
* {
box-sizing: border-box;
}
#5 — Border Radius
Atelier #5Arrondis les coins d'un bouton de 10px.
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
button {
border-radius: 10px;
}