3. Le modèle de boîte CSS : Comprendre la structure des éléments

Owen, penché sur son écran, explique à Eva :
« En CSS, chaque élément est comme une boîte. Pour bien styliser, il faut comprendre comment cette boîte est construite. »

Eva hoche la tête : « Alors, c’est quoi cette fameuse boîte modèle ? »

Rostand ajoute : « C’est la base de tout design web. On va la décortiquer ensemble. »

---

Objectif de cette leçon

• Comprendre la structure du modèle de boîte CSS.
• Maîtriser les propriétés clés : margin, padding, border, width, height.
• Apprendre à manipuler l’espacement et les dimensions des éléments.

---

Qu’est-ce que le modèle de boîte ?

Le modèle de boîte est un concept fondamental en CSS qui définit la structure d’un élément HTML. Chaque élément est composé de quatre parties :

1. Contenu : Le texte ou les médias à l’intérieur de l’élément.
2. Padding : L’espace entre le contenu et la bordure.
3. Border : La bordure qui entoure le padding et le contenu.
4. Margin : L’espace extérieur qui sépare l’élément des autres éléments.

---

Les propriétés du modèle de boîte

Propriété	Description	Exemple
width	Largeur du contenu	width: 300px;
height	Hauteur du contenu	height: 200px;
padding	Espace interne (haut, droite, bas, gauche)	padding: 10px 15px;
border	Bordure (épaisseur, style, couleur)	border: 2px solid #000;
margin	Espace externe (haut, droite, bas, gauche)	margin: 20px;
box-sizing	Contrôle la manière dont la taille est calculée	box-sizing: border-box;

---

Le rôle de box-sizing

Par défaut, la propriété box-sizing est définie sur content-box, ce qui signifie que la largeur et la hauteur ne prennent en compte que le contenu. Cependant, il est souvent préférable d’utiliser border-box, qui inclut le padding et la bordure dans les dimensions de l’élément.

/* Exemple avec box-sizing */
* {
    box-sizing: border-box;
}

---

Exemple pratique

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="UTF-8" />
        <title>Modèle de boîte CSS</title>
        <style>
            .boite {
                width: 300px;
                height: 200px;
                padding: 20px;
                border: 5px solid #333;
                margin: 30px;
                background-color: #f0f0f0;
            }
        </style>
    </head>
    <body>
        <div class="boite">Ceci est une boîte CSS !</div>
    </body>
</html>

---

Ce qu’Eva retient

• Le modèle de boîte est essentiel pour contrôler l’espacement et les dimensions des éléments.
• Utiliser box-sizing: border-box pour simplifier les calculs de taille.
• Bien comprendre la différence entre padding, border, et margin pour éviter les erreurs de mise en page.

---

Voici trois exercices pratiques pour approfondir ta compréhension du modèle de boîte CSS. Ces exercices sont conçus pour t’aider à maîtriser les concepts de margin, padding, border, et box-sizing.

---

Exercice 1 : Créer une carte de profil

Objectif : Concevoir une carte de profil en utilisant le modèle de boîte CSS.

1. Crée une div avec une classe .profil-card.
2. Ajoute une image de profil, un nom et une courte description à l’intérieur.
3. Applique les styles suivants :
   • Largeur : 250px
   • Hauteur : 350px
   • Padding : 20px
   • Bordure : 2px solide gris
   • Margin : 15px
   • Couleur de fond : #f9f9f9
4. Assure-toi que la bordure et le padding sont inclus dans les dimensions totales de la carte (box-sizing: border-box).

---

Exercice 2 : Espacement entre les éléments

Objectif : Manipuler les marges et les paddings pour créer un espacement harmonieux.

1. Crée trois div avec des classes .boite1, .boite2, et .boite3.
2. Applique les styles suivants :
   • .boite1 : Padding de 10px, margin de 20px, bordure de 1px solide noir.
   • .boite2 : Padding de 15px, margin de 10px, bordure de 2px solide bleu.
   • .boite3 : Padding de 20px, margin de 5px, bordure de 3px solide rouge.
3. Observe comment les marges et les paddings interagissent entre les éléments.

---

Exercice 3 : Layout avec box-sizing

Objectif : Utiliser box-sizing pour créer un layout fluide.

1. Crée un conteneur principal avec une classe .container.
2. Ajoute trois div enfants avec des classes .colonne1, .colonne2, et .colonne3.
3. Applique les styles suivants :
   • .container : Largeur de 100%, padding de 10px, bordure de 1px solide gris.
   • .colonne1, .colonne2, .colonne3 : Largeur de 30%, padding de 15px, margin de 5px, bordure de 1px solide noir.
4. Utilise box-sizing: border-box pour garantir que les colonnes s’ajustent correctement dans le conteneur.

---

Ces exercices te permettront de pratiquer et de mieux comprendre les concepts clés du modèle de boîte CSS. Bonne pratique ! 🚀