Dimensionnement des boîtes

Fait partie de la section Style avec CSS du Journey HTML de Coddy. Leçon 39 sur 76.

En CSS, box-sizing est une propriété qui détermine comment sont calculées la largeur et la hauteur totales d’un élément. Par défaut, les propriétés width et height incluent uniquement la taille du contenu et ne tiennent pas compte du remplissage, des bordures ni 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 remplissage et des bordures.

Cela peut simplifier les calculs de mise en page et éviter les 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 dimensionnement de boîte souhaité, qui peut être l’un des suivants :

content-box : Il s’agit de la valeur par défaut. Les propriétés width et height incluent uniquement la taille du contenu. Le remplissage, les bordures 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, de la marge intérieure et de la bordure. Les marges extérieures 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 de <div> sera de 300px (contenu) + 40px (marges intérieures gauche et droite) + 10px (bordure gauche et droite) = 350px. La hauteur sera calculée de la même manière.

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 remplissage et la bordure. La zone de contenu réelle rétrécira pour tenir compte du remplissage et de la bordure, ce qui donnera une largeur de contenu de 400px - 60px (remplissage à gauche et à droite) - 20px (bordure à gauche et à droite) = 320px. La hauteur sera calculée de la même manière.

Défi

Facile

Un document HTML contenant deux éléments (<div>) vous est fourni, chacun ayant une classe différente. Votre tâche consiste à utiliser la propriété box-sizing pour contrôler le calcul de la largeur et de la hauteur de ces éléments. Suivez les étapes ci-dessous :

Écrivez une règle CSS qui cible l’élément <div> ayant la classe content-box-div. Définissez width sur 300px, height sur 200px, padding sur 20px, border sur 5px solid blue et box-sizing sur content-box.
Écrivez une règle CSS qui cible l’élément <div> ayant la classe border-box-div. Définissez width sur 300px, height sur 200px, padding sur 20px, border sur 5px solid red et 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>