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 content et ne tiennent pas compte du padding, des border 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 du padding et du border.

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

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

selector {
    box-sizing: value;
}

value : le comportement box-sizing souhaité, qui peut être l’une des valeurs suivantes :

content-box : Il s’agit de la valeur par défaut. Les propriétés width et height incluent uniquement la taille du contenu. Padding, borders et les marges sont ajoutés en dehors de la largeur et de la hauteur spécifiées.

border-box : Les propriétés width et height incluent les dimensions du contenu, du remplissage 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; /* Default behavior */
}

.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éellement rendue de <div> sera de 300px (contenu) + 40px (remplissage gauche et droit) + 10px (bordure gauche et droite) = 350px. La hauteur sera calculée de manière similaire.

En revanche, 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, le padding et la border. La zone de contenu réelle rétrécira pour s’adapter au padding et à la border, ce qui donnera une largeur de contenu de 400px - 60px (padding gauche et droit) - 20px (border gauche et droite) = 320px. La hauteur sera calculée de manière similaire.

Défi

Facile

On vous donne un document HTML contenant deux éléments <div>, chacun avec une class 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 class <strong>content-box-div</strong>. Définissez la width sur 300px, la height sur 200px, le padding sur 20px, la border sur 5px solid blue et le box-sizing sur content-box.
Écrivez une règle CSS qui cible l’élément <div> avec la class <strong>border-box-div</strong>. Définissez la width sur 300px, la height sur 200px, le padding sur 20px, la border sur 5px solid red et le box-sizing sur border-box.

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>