Aller au contenu principal

Module CSS.3 – Box Model

Objectif​

Maîtriser le Box Model CSS : margin, padding, border, box-sizing pour contrôler précisément l'espacement et les dimensions des éléments.

Théorie​

Le Box Model​

Box Model = Modèle de boîte qui définit comment les éléments sont dimensionnés.

Structure d'un élément :

┌─────────────────────────────────┐
│         MARGIN (extérieur)      │
│  ┌───────────────────────────┐  │
│  │       BORDER (bordure)    │  │
│  │  ┌─────────────────────┐  │  │
│  │  │   PADDING (intérieur)│  │  │
│  │  │  ┌───────────────┐  │  │  │
│  │  │  │   CONTENU     │  │  │  │
│  │  │  └───────────────┘  │  │  │
│  │  └─────────────────────┘  │  │
│  └───────────────────────────┘  │
└─────────────────────────────────┘

Composants :

  1. Contenu : Le contenu réel (texte, image)
  2. Padding : Espace intérieur (entre contenu et bordure)
  3. Border : Bordure
  4. Margin : Espace extérieur (entre éléments)

Width et Height​

Par défaut : width et height s'appliquent au contenu uniquement.

.box {
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 5px solid black;
    margin: 10px;
}

Largeur totale :

  • Contenu : 200px
  • Padding : 20px × 2 = 40px
  • Border : 5px × 2 = 10px
  • Total : 250px (sans margin)

Hauteur totale :

  • Contenu : 100px
  • Padding : 20px × 2 = 40px
  • Border : 5px × 2 = 10px
  • Total : 150px (sans margin)

Padding​

Padding = Espace intérieur (entre contenu et bordure).

Syntaxe :

/* Tous les côtés */
padding: 20px;

/* Vertical / Horizontal */
padding: 10px 20px; /* top/bottom left/right */

/* Tous les côtés */
padding: 10px 20px 15px 25px; /* top right bottom left */

/* Côtés individuels */
padding-top: 10px;
padding-right: 20px;
padding-bottom: 15px;
padding-left: 25px;

Valeurs :

  • px, em, rem, %
  • 0 : Pas de padding

Exemple :

.box {
    padding: 20px; /* Tous les côtés */
}

.card {
    padding: 15px 25px; /* Vertical Horizontal */
}

.button {
    padding: 10px 20px 10px 20px; /* Top Right Bottom Left */
}

Border​

Border = Bordure autour de l'élément.

Syntaxe :

border: width style color;

Exemple :

border: 2px solid black;

Styles de bordure :

  • solid : Ligne continue
  • dashed : Ligne pointillée
  • dotted : Ligne en pointillés
  • double : Double ligne
  • none : Pas de bordure

Côtés individuels :

border-top: 2px solid black;
border-right: 3px dashed red;
border-bottom: 1px dotted blue;
border-left: 4px solid green;

Propriétés séparées :

border-width: 2px;
border-style: solid;
border-color: black;

Bordure arrondie :

border-radius: 10px;
border-radius: 50%; /* Cercle */
border-radius: 10px 20px; /* Ellipse */

Margin​

Margin = Espace extérieur (entre éléments).

Syntaxe : Identique à padding

margin: 20px;
margin: 10px 20px;
margin: 10px 20px 15px 25px;
margin-top: 10px;

Valeurs spéciales :

  • auto : Centrage horizontal
.container {
    width: 800px;
    margin: 0 auto; /* Centré */
}

Margin négatif :

.element {
    margin-top: -10px; /* Remonte l'élément */
}

Collapse des margins : Quand deux éléments verticaux ont des margins, seule la plus grande est appliquée.

.element1 {
    margin-bottom: 20px;
}
.element2 {
    margin-top: 30px;
}
/* Espace réel : 30px (pas 50px) */

Box-sizing​

box-sizing = Définit ce que width et height incluent.

content-box (défaut)​

width et height = contenu uniquement.

.box {
    box-sizing: content-box;
    width: 200px;
    padding: 20px;
    border: 5px solid black;
    /* Largeur totale : 200 + 40 + 10 = 250px */
}

border-box (recommandé)​

width et height = contenu + padding + border.

.box {
    box-sizing: border-box;
    width: 200px;
    padding: 20px;
    border: 5px solid black;
    /* Largeur totale : 200px (padding et border inclus) */
}

Reset global (recommandé) :

* {
    box-sizing: border-box;
}

Avantages de border-box :

  • ✅ Plus prévisible
  • ✅ Plus facile à calculer
  • ✅ Standard moderne

Display​

display = Définit comment l'élément est affiché.

Valeurs principales :

  • block : Bloc (largeur complète, saut de ligne)
  • inline : Ligne (largeur du contenu, pas de saut)
  • inline-block : Ligne mais avec width/height
  • none : Caché (pas d'espace réservé)

Box Model selon display :

  • block : Margin, padding, border appliqués
  • inline : Margin/padding horizontaux seulement
  • inline-block : Tous les aspects du box model

Exercices guidés​

Exercice 1 : Padding et margin​

Créez des éléments avec :

  • Padding de 20px sur tous les côtés
  • Margin de 10px
  • Observez l'espacement

Exercice 2 : Border​

Créez des éléments avec :

  • Border solide de 2px
  • Border pointillée de 3px
  • Border-radius de 10px

Exercice 3 : Box-sizing​

Créez deux éléments identiques :

  • Un avec content-box
  • Un avec border-box
  • Comparez les dimensions totales

Exercice 4 : Centrage avec margin​

Créez un conteneur :

  • Largeur de 800px
  • Centré avec margin: 0 auto

Exercice 5 : Box Model complet​

Créez une carte avec :

  • Width de 300px
  • Padding de 20px
  • Border de 2px
  • Margin de 15px
  • Utilisez border-box

❌ Erreurs fréquentes​

Erreur 1 : Oublier box-sizing​

❌ Mauvais :

.box {
    width: 200px;
    padding: 20px;
    /* Largeur totale : 240px (surprise !) */
}

✅ Bon :

* {
    box-sizing: border-box;
}
.box {
    width: 200px;
    padding: 20px;
    /* Largeur totale : 200px (prévisible) */
}

Pourquoi : border-box est plus prévisible.

Erreur 2 : Confondre padding et margin​

❌ Mauvais :

.element {
    padding: 20px; /* Pour espacer de l'extérieur */
}

✅ Bon :

.element {
    margin: 20px; /* Espace extérieur */
    padding: 20px; /* Espace intérieur */
}

Pourquoi : Padding = intérieur, margin = extérieur.

Erreur 3 : Margin négatif mal utilisé​

❌ Mauvais :

.element {
    margin: -50px; /* Trop agressif */
}

✅ Bon :

.element {
    margin: -5px; /* Subtile si nécessaire */
}

Pourquoi : Margin négatif peut casser la mise en page.

Erreur 4 : Units incohérentes​

❌ Mauvais :

.box {
    padding: 1em;
    margin: 20px;
    border: 2rem;
}

✅ Bon :

.box {
    padding: 1rem;
    margin: 1rem;
    border: 2px;
}

Pourquoi : Cohérence dans les unités.

Erreur 5 : Oublier le collapse des margins​

❌ Mauvais :

.element1 { margin-bottom: 20px; }
.element2 { margin-top: 30px; }
/* Pense que l'espace sera 50px */

✅ Bon :

.element1 { margin-bottom: 30px; }
.element2 { margin-top: 0; }
/* Espace réel : 30px */

Pourquoi : Comprendre le collapse des margins.

🚀 Mini-projet​

Mission : Créer des cartes avec Box Model maîtrisé

Créez une page avec 3 cartes :

Chaque carte :

  • Width de 300px (avec border-box)
  • Padding de 20px
  • Border de 2px solid
  • Border-radius de 10px
  • Margin de 15px entre les cartes
  • Contenu (titre, texte, bouton)

Défis :

  • Utiliser border-box pour des dimensions prévisibles
  • Espacer correctement avec margin
  • Créer des bordures arrondies
  • Centrer les cartes avec margin auto

Critères :

  • ✅ Box Model maîtrisé
  • ✅ border-box utilisé
  • ✅ Espacement cohérent
  • ✅ Dimensions prévisibles

Objectif : Maîtriser le Box Model pour contrôler précisément les dimensions et l'espacement.

Validation : Vous pouvez passer au module suivant quand vous maîtrisez margin, padding, border, box-sizing et pouvez créer des layouts avec dimensions prévisibles.