Box Sizing

Fait partie de la section Styling with CSS du Journey HTML de Coddy — leçon 39 sur 76.

En CSS, box-sizing est une propriété qui détermine comment la largeur et la hauteur totales d'un élément sont calculées. Par défaut, les propriétés width et height incluent uniquement la taille du contenu et ne tiennent pas compte du remplissage (padding), des bordures ou des marges. Cependant, en utilisant la propriété box-sizing, vous pouvez modifier ce comportement et faire en sorte que les propriétés width et height incluent également les tailles de remplissage et de bordure.

Cela peut simplifier les calculs de mise en page et éviter des problèmes de dimensionnement inattendus.

Voici la syntaxe de base pour utiliser la propriété box-sizing :

selector {
    box-sizing: value;
}

value : le comportement de box-sizing souhaité, qui peut être l'un des suivants :

content-box : C'est la valeur par défaut. Les propriétés width et height incluent uniquement la taille du contenu. Le remplissage (padding), les bordures et les marges sont ajoutés à l'extérieur de la largeur et de la hauteur spécifiées.

border-box : les propriétés width et height incluent les tailles du contenu, du padding et de la bordure. Les marges sont toujours ajoutées à l'extérieur de l'élément.

Par exemple :

div {
    width: 300px;
    height: 200px;
    padding: 20px;
    border: 5px solid black;
    box-sizing: content-box; /* Comportement par défaut */
}

.container {
    width: 400px;
    height: 300px;
    padding: 30px;
    border: 10px solid red;
    box-sizing: border-box;
}

Dans cet exemple, l'élément <div> a une valeur box-sizing de content-box. Cela signifie que la largeur réelle rendue du <div> sera de 300px (contenu) + 40px (padding gauche et droit) + 10px (bordure gauche et droite) = 350px. La hauteur sera calculée de manière similaire.

D'un autre côté, l'élément avec la classe container a une valeur box-sizing de border-box. Dans ce cas, la width spécifiée de 400px inclura le contenu, la marge intérieure (padding) et la bordure. La zone de contenu réelle rétrécira pour s'adapter à la marge intérieure et à la bordure, ce qui donnera une largeur de contenu de 400px - 60px (marge intérieure gauche et droite) - 20px (bordure gauche et droite) = 320px. La hauteur sera calculée de la même manière.

Défi

Facile

On vous donne un document HTML avec deux divisions (<div>), chacune ayant une classe différente. Votre tâche consiste à utiliser la propriété box-sizing pour contrôler la manière dont la largeur et la hauteur de ces éléments sont calculées. Suivez les étapes ci-dessous :

Écrivez une règle CSS qui cible l'élément <div> avec la classe <strong>content-box-div</strong>. Définissez la width à 300px, la height à 200px, le padding à 20px, la border à 5px solid blue, et le box-sizing à content-box.
Écrivez une règle CSS qui cible l'élément <div> avec la classe <strong>border-box-div</strong>. Définissez la width à 300px, la height à 200px, le padding à 20px, la border à 5px solid red, et le box-sizing à border-box.

Aide-mémoire

La propriété box-sizing détermine comment la largeur et la hauteur totales d'un élément sont calculées :

selector {
    box-sizing: value;
}

Valeurs :

content-box (par défaut) : La largeur et la hauteur incluent uniquement la taille du contenu. Le remplissage (padding) et les bordures sont ajoutés à l'extérieur.
border-box : La largeur et la hauteur incluent le contenu, le remplissage (padding) et la taille des bordures. Les marges sont toujours ajoutées à l'extérieur.

/* content-box example */
div {
    width: 300px;
    height: 200px;
    padding: 20px;
    border: 5px solid black;
    box-sizing: content-box;
    /* Total width: 300px + 40px + 10px = 350px */
}

/* border-box example */
.container {
    width: 400px;
    height: 300px;
    padding: 30px;
    border: 10px solid red;
    box-sizing: border-box;
    /* Total width: 400px (content shrinks to fit) */
}

Essayez vous-même

<html>
<head>
    <title>Box Sizing</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="content-box-div">This is a div with content-box.</div>
    <div class="border-box-div">This is a div with border-box.</div>
</body>
</html>