Propriété CSS box-sizing
La propriété box-sizing définit le calcul de la largeur et de la hauteur d'un élément. Voir des exemples et les tester.
La propriété box-sizing contrôle la façon dont la width et la height d'un élément sont calculées — plus précisément, si le padding et la border sont comptés à l'intérieur de ces dimensions ou ajoutés par-dessus. Elle fait partie des propriétés CSS3.
Cette page explique la différence entre les deux modèles de boîte (content-box et border-box), pourquoi border-box est la valeur par défaut moderne pour la plupart des mises en page, et comment l'appliquer à toute une page.
Comment le modèle de boîte affecte la taille
Par défaut (content-box), width et height définissent uniquement la taille de la zone de contenu. Le padding et la bordure sont ensuite ajoutés par-dessus, de sorte que la boîte rendue est plus grande que la valeur que vous avez écrite :
- largeur + padding + bordure = largeur rendue de l'élément
- hauteur + padding + bordure = hauteur rendue de l'élément
Par exemple, une boîte avec width: 400px, padding: 50px de chaque côté et une bordure de 5px de chaque côté occupe en réalité 400 + 100 + 10 = 510px d'espace horizontal. C'est une source fréquente de bugs de mise en page : deux colonnes de largeur 50% avec n'importe quel padding ou bordure ne tiendront pas côte à côte, car chacune se retrouve plus large que la moitié du conteneur.
Avec box-sizing: border-box, le padding et la bordure sont intégrés à l'intérieur de la largeur et de la hauteur déclarées. Un élément width: 50% reste exactement à la moitié de la largeur du conteneur, quel que soit le padding ou la bordure ajouté — c'est pourquoi la plupart des feuilles de style réinitialisent chaque élément à border-box.
| Valeur initiale | content-box |
|---|---|
| S'applique à | Tous les éléments qui acceptent width et height. |
| Hérité | Non. |
| Animable | Non. |
| Version | CSS3 |
| Syntaxe DOM | object.style.boxSizing = "border-box"; |
Syntaxe
Syntaxe de la propriété CSS box-sizing
box-sizing: content-box | border-box | initial | inherit;L'exemple ci-dessous montre deux éléments <div> avec des déclarations identiques de width, height, padding et border — ils ne diffèrent que par leur valeur box-sizing, ce qui suffit à les faire s'afficher à des tailles différentes :
Exemple de la propriété box-sizing
Exemple de la propriété CSS box-sizing avec les valeurs content-box et border-box
<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
box-sizing: content-box;
width: 400px;
height: 50px;
padding: 50px;
border: 5px double #1c87c9;
}
.div2 {
box-sizing: border-box;
width: 400px;
height: 50px;
padding: 50px;
border: 5px dashed #8ebf42;
}
</style>
</head>
<body>
<h2>Box-sizing Example</h2>
<hr />
<h3>box-sizing: content-box (default):</h3>
<div class="div1">The width for this div is set as 400px. Thus, the full width is 400px + 10px (left and right border) + 100px (left and right padding) = 510px.</div>
<br />
<h3>box-sizing: border-box:</h3>
<div class="div2">The width and height apply to all parts of the div element: The full width is 400px.</div>
</body>
</html>Résultat
Avec content-box, la boîte rendue est plus large que la width déclarée car le padding et la bordure lui sont ajoutés. Avec border-box, le padding et la bordure sont absorbés dans la width et la height déclarées, de sorte que la boîte reste exactement à la taille spécifiée.
border-box est la valeur que vous utiliserez le plus souvent lors de la création de mises en page. Elle rend la taille des éléments prévisible et élimine toute une catégorie de pièges — vous pouvez ajouter du padding ou une bordure sans recalculer les largeurs.
Exemple de deux boîtes bordées placées côte à côte
Ici, border-box permet à deux boîtes flottantes de largeur 50% de se placer l'une à côté de l'autre même si chacune possède sa propre bordure et son propre padding. Avec le content-box par défaut, les bordures et le padding pousseraient la largeur combinée au-delà de 100% et forceraient la deuxième boîte sur une nouvelle ligne.
Exemple de la propriété CSS box-sizing avec la valeur border-box
<!DOCTYPE html>
<html>
<head>
<style>
div.container {
width: 100%;
border: 2px double #1c87c9;
}
div.box {
box-sizing: border-box;
width: 50%;
border: 3px solid #ccc;
float: left;
padding: 3px;
}
</style>
</head>
<body>
<h2>Box-sizing Example</h2>
<p>Here you can see two bordered boxes defined side by side.</p>
<div class="container">
<div class="box">Left part</div>
<div class="box">Right part</div>
<div style="clear:both;"></div>
</div>
</body>
</html>Appliquer border-box à toute la page
Plutôt que de définir box-sizing sur chaque élément individuellement, la plupart des projets l'appliquent une seule fois à tous les éléments avec le sélecteur universel. C'est la réinitialisation CSS la plus courante dans les feuilles de style modernes :
*,
*::before,
*::after {
box-sizing: border-box;
}Les sélecteurs *::before et *::after garantissent que les boîtes de contenu généré suivent la même règle. Après cette réinitialisation, width et height signifient « la taille totale incluant le padding et la bordure » partout, ce qui correspond à ce que la plupart des gens attendent intuitivement.
Compatibilité des navigateurs
box-sizing est pris en charge dans tous les navigateurs modernes, y compris les versions actuelles de Chrome, Firefox, Safari et Edge. C'est une fonctionnalité CSS3 stable qui ne nécessite aucun préfixe vendeur pour les navigateurs actuels.
Valeurs
| Valeur | Description |
|---|---|
| content-box | Les propriétés width et height incluent le contenu, mais pas le padding, la bordure ou la marge. C'est la valeur par défaut. |
| border-box | Les propriétés width et height incluent le contenu, le padding et la bordure, mais n'incluent pas la marge. |
| initial | Définit la propriété à sa valeur par défaut. |
| inherit | Hérite la propriété de son élément parent. |