Propriété CSS box-sizing

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>

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>

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.

Support de Navigateurs

10.0+
4.0-9.0 -wbkit-
12.0+ 29.0+
2.0-28.0 -moz-
5.1+
3.1-5.0 -webkit-
10.0+


Trouvez-vous cela utile?

Articles Associées