Propriété CSS box-sizing

❮ Précédent Suivant ❯

La propriété box-sizing définit la calculation de la width (largeur) et height (hauteur) d'un élément, si elles comprennent padding (remplissage) et border (bordure).

Les propriétés width et height d'un élément sont par défaut calculées comme cela:

width+ padding + border= largeur actuelle d'un élément
height+ padding + border= hauteur actuelle d'un élément

Donc, quand la largeur et la hauteur de l'élément sont définies, l'élément apparaît plus gros qu'il était défini (car la border et le padding de l'élément ont ajoutées la largeur et la hauteur).

Valeur initiale	content-box
Appliquée à	Tous les éléments, à l'éxception de largeur et hauteur.
Héritée	Non.
Animable	Non.
Version	CSS3
Syntaxe DOM	object.style.boxSizing = "border-box";

Syntaxe

box-sizing: content-box | border-box | initial | inherit;

Dans cet exemple il y a deux éléments <div> avec la même width et height: spécifiées.

Exemple

<!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>Exemple de box-sizing</h2><hr />
    <h3>box-sizing: content-box (default):</h3>
    <div class="div1">La largeur de ce div est définie 400px. Donc, la largeur complète est 400px + 10px (bordures droite et gauche) + 100px (padding droit et gauche) = 510px.</div>
    <br>
    <h3>box-sizing: border-box:</h3>
    <div class="div2">La largeur et la hauteur s'appliquent à toutes les parties de l'élément div: La largeur complète est 400px.</div>
  </body>
</html>

Essayez-vous-même!

Si la propriété box-sizing est définie comme content-box, la largeur complète sera plus que la largeur définie pour div. Et si la box-sizing: border-box est définie, padding et border seront compris dans width et height.

Voyons un autre exemple avec deux boîtes bordurées définies côte à côte.

Exemple

<!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>Exemple de box-sizing</h2>
    <p>Voici deux boîtes bordurés définis côte à côte.</p>
    <div class="container">
      <div class="box">Left part</div>
      <div class="box">Right part</div>
      <div style="clear:both;"></div>
    </div>
  </body>
</html>

Essayez-vous-même!

Valeurs

Valeur	Description
content-box	Les propriétés width et height inclurent le contenu, mais les propriétés padding, border, ou margin ne sont pas inclus. C'est la valeur initiale.
border-box	Les propriétés width et height inclurent le contenu, padding et border, mais n'inclure pas margin.
initial	Définit la valeur initiale.
inherit	Hérite la propriété de l'élément parent.