Le modèle de boîte (Box Model)

Comprendre le Box Model

Chaque élément HTML est une boîte rectangulaire avec du contenu, padding, bordure et marge.

Les 4 composantes

+---------------------------+
|        Margin             |
|  +---------------------+  |
|  |     Border          |  |
|  |  +---------------+  |  |
|  |  |   Padding     |  |  |
|  |  |  +---------+  |  |  |
|  |  |  | Content |  |  |  |
|  |  |  +---------+  |  |  |
|  |  +---------------+  |  |
|  +---------------------+  |
+---------------------------+

Content (Contenu)

La zone où s'affiche le texte et les images.

div {
    width: 300px;
    height: 200px;
}

Padding (Rembourrage)

Espace entre le contenu et la bordure.

/* Uniforme */
div {
    padding: 20px;
}

/* Par côté */
div {
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
}

/* Notation courte (haut, droite, bas, gauche) */
div {
    padding: 10px 20px 10px 20px;
}

/* Notation courte (vertical, horizontal) */
div {
    padding: 10px 20px;
}

Border (Bordure)

/* Toutes propriétés */
div {
    border-width: 2px;
    border-style: solid;
    border-color: #333;
}

/* Notation courte */
div {
    border: 2px solid #333;
}

/* Par côté */
div {
    border-top: 1px dashed red;
    border-bottom: 3px double blue;
}

/* Border-radius (coins arrondis) */
div {
    border-radius: 10px;
}

/* Cercle */
div {
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

Margin (Marge)

Espace à l'extérieur de l'élément.

/* Uniforme */
div {
    margin: 20px;
}

/* Centrer horizontalement */
div {
    width: 300px;
    margin: 0 auto;
}

/* Par côté */
div {
    margin-top: 20px;
    margin-right: 10px;
    margin-bottom: 20px;
    margin-left: 10px;
}

/* Notation courte */
div {
    margin: 20px 10px;
}

Box-sizing

Contrôle comment width et height sont calculés.

content-box (défaut)

div {
    width: 300px;
    padding: 20px;
    border: 5px solid black;
}
/* Largeur totale = 300 + 40 (padding) + 10 (border) = 350px */

border-box (recommandé)

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

Reset universel recommandé

* {
    box-sizing: border-box;
}

Display

/* Bloc (prend toute la largeur) */
div {
    display: block;
}

/* En ligne (sur la même ligne) */
span {
    display: inline;
}

/* Inline-block (en ligne mais avec width/height) */
.btn {
    display: inline-block;
    width: 200px;
}

/* Cacher un élément */
.hidden {
    display: none;
}

Width et Height

/* Pixels */
div {
    width: 300px;
    height: 200px;
}

/* Pourcentage */
div {
    width: 50%;
    height: 100%;
}

/* Auto */
img {
    width: 100%;
    height: auto;
}

/* Min et max */
div {
    min-width: 200px;
    max-width: 800px;
    min-height: 100px;
    max-height: 600px;
}

Exemple pratique : carte

.card {
    width: 300px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    margin: 20px;
    box-sizing: border-box;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.card img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    margin-bottom: 15px;
}

.card h3 {
    margin: 0 0 10px 0;
    color: #333;
}

.card p {
    margin: 0;
    color: #666;
    line-height: 1.6;
}

Points clés

• Box Model = Content + Padding + Border + Margin
• box-sizing: border-box simplifie les calculs
• margin: 0 auto centre horizontalement
• padding crée l'espace interne
• margin crée l'espace externe

📝 Vous avez terminé cette leçon ?

Créez un compte gratuit pour sauvegarder votre progression !