Maîtriser le modèle de boîte

Un bloc qui semble tenir dans la page peut en réalité être plus large que prévu : son remplissage intérieur et ses bords s’ajoutent à sa largeur. Vous allez apprendre à calculer cet espace pour dimensionner correctement les horaires et le bloc de contact de la page de l’atelier de jardinage.

La structure HTML et les sélecteurs utilisés dans les exemples reprennent les notions vues dans les leçons précédentes. Vous travaillerez ici sur les dimensions et l’espace autour des éléments, sans encore organiser plusieurs blocs en Flexbox ou en Grid.

Les quatre zones d’une boîte CSS

Le navigateur représente chaque élément comme une boîte constituée de zones emboîtées. Au centre se trouve le contenu, par exemple le texte d’un paragraphe. Le padding est l’espace intérieur entre le contenu et la bordure ; la bordure entoure le contenu et son padding ; la margin est l’espace extérieur qui sépare la boîte des éléments voisins.

Ces zones ont des rôles distincts. Le padding agrandit l’espace disponible à l’intérieur d’un bloc ; la marge l’éloigne de ce qui l’entoure. La bordure compte dans le calcul de ses dimensions, même si vous approfondirez ses propriétés de style dans la leçon consacrée aux bordures et aux débordements.

Définir la largeur et la hauteur

Les propriétés width et height définissent les dimensions de la boîte selon la valeur de box-sizing. Avec le comportement par défaut, content-box, elles mesurent uniquement la zone de contenu. Pour calculer la largeur totale, additionnez la largeur déclarée, les paddings gauche et droit, les bordures gauche et droite, puis les marges gauche et droite.

/* La largeur déclarée ne comprend que le contenu. */
.contact {
    box-sizing: content-box;
    width: 300px;
    padding: 20px;
    border: 2px solid #477a45;
    margin: 16px;
}

Largeur totale occupée horizontalement : 300 + 20 + 20 + 2 + 2 + 16 + 16 = 376 px. La boîte elle-même, sans ses marges, mesure 344 px.

Dans cet exemple, les valeurs de padding et de bordure s’appliquent de chaque côté. La boîte mesure donc 344 pixels de large avant d’ajouter les marges ; l’espace horizontal total nécessaire atteint 376 pixels. Si la zone disponible est plus étroite, le bloc risque de dépasser ou de repousser les autres éléments.

Simplifier le calcul avec border-box

Avec box-sizing: border-box, la largeur déclarée comprend le contenu, le padding et les bordures. Une boîte fixée à 300 pixels reste donc large de 300 pixels, même si vous lui ajoutez du padding ou une bordure ; les marges restent à l’extérieur et s’ajoutent toujours à l’espace total occupé.

<!doctype html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Atelier de jardinage</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Atelier de jardinage</h1>
        <p>Des conseils pratiques pour cultiver votre jardin.</p>
    </header>
    <main>
        <section class="horaires">
            <h2>Horaires</h2>
            <p>Samedi, de 9 h à 12 h.</p>
        </section>
        <section class="contact" id="contact">
            <h2>Contact</h2>
            <p>Écrivez-nous pour réserver votre place.</p>
            <a href="mailto:[email protected]">Nous contacter</a>
        </section>
    </main>
</body>
</html>

:root {
    --couleur-texte: #263326;
    --couleur-fond: #f3f5ed;
    --couleur-accent: #477a45;
    --espace: 16px;
}

/* Le contenu, le padding et la bordure tiennent dans la largeur déclarée. */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: var(--espace);
    color: var(--couleur-texte);
    background-color: var(--couleur-fond);
    font-family: Arial, sans-serif;
}

header,
.horaires,
.contact {
    width: 100%;
    max-width: 600px;
    padding: var(--espace);
    margin: 0 auto var(--espace);
    border: 2px solid var(--couleur-accent);
}

.contact {
    width: 320px;
    padding: 24px;
}

Le bloc .contact reste large de 320 px, padding et bordures compris. Ses marges horizontales automatiques répartissent l’espace restant de part et d’autre lorsque le conteneur le permet.

La règle générale appliquée à * évite de recalculer la largeur après chaque ajout de padding ou de bordure. Pour le bloc de contact, les 320 pixels incluent ainsi les 24 pixels de padding de chaque côté et les deux bordures de 2 pixels ; il reste 268 pixels pour le contenu. La marge verticale de 16 pixels crée, elle, un espace extérieur sous le bloc.

À retenir

• Une boîte comprend le contenu, le padding, la bordure et la marge, de l’intérieur vers l’extérieur.
• Avec content-box, width et height mesurent le contenu seul ; padding et bordures s’ajoutent.
• Avec border-box, la largeur déclarée inclut le contenu, le padding et les bordures.
• Les marges restent à l’extérieur de la largeur déclarée et contribuent à l’espace total occupé.
• Calculez les dimensions des deux côtés de la boîte pour repérer un dépassement.

Dans la prochaine leçon, vous verrez comment définir l’apparence des bordures et gérer le contenu qui dépasse de son espace.