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, si elles incluent le padding et les bordures.

La propriété box-sizing fait partie des propriétés CSS3.

Par défaut, la largeur et la hauteur d’un élément sont calculées comme ceci :

largeur + padding + bordure = largeur réelle d’un élément
hauteur + padding + bordure = hauteur réelle d’un élément

Ainsi, lorsque la largeur et la hauteur d’un élément sont définies, l’élément apparaît souvent plus grand que prévu (car la bordure et le padding de l’élément s’ajoutent à la largeur et à la hauteur spécifiées).

Initial Value	content-box
Applies to	Tous les éléments qui acceptent width et height.
Inherited	No.
Animatable	No.
Version	CSS3
DOM Syntax	object.style.boxSizing = "border-box";

Syntaxe

Syntaxe de la propriété CSS box-sizing

css

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

Dans cet exemple, deux éléments <div> sont présentés avec la même largeur et la même hauteur spécifiées :

Exemple de la propriété box-sizing :

Exemple de la propriété CSS box-sizing avec les valeurs content-box et border-box

html

<!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>

Try it Yourself »

Résultat

CSS box-sizing Property

Si box-sizing est défini sur content-box, la largeur totale sera supérieure à la largeur définie du div. Et si box-sizing: border-box est défini, le padding et la bordure seront inclus dans la largeur et la hauteur.

Les propriétés box-sizing et border-box sont utilisées pour la mise en page des éléments. Cette méthode est utile car elle facilite le travail avec les tailles des éléments en éliminant le nombre d’écueils que l’on peut rencontrer lors de la mise en page du contenu.

Exemple d’utilisation de la propriété box-sizing pour créer deux boîtes bordées définies côte à côte :

Exemple de la propriété CSS box-sizing avec la valeur border-box

html

<!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>

Try it Yourself »

Valeurs

Value	Description
content-box	Les propriétés width et height incluent le contenu, mais le padding, la bordure ou la marge ne sont pas inclus. 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é sur sa valeur par défaut.
inherit	Hérite de la propriété de son élément parent.

Practice

What does the CSS 'box-sizing' property do?

It allows us to include the padding and border in an element's total width and height.It sets the color of a box.It is used to calculate the width and height of an element.It is used to set the margin of an element.It prevents a box from overflowing its content.

Propriété CSS box-sizing ​

Syntaxe ​

Exemple de la propriété box-sizing : ​

Résultat ​

Exemple d’utilisation de la propriété box-sizing pour créer deux boîtes bordées définies côte à côte : ​

Valeurs ​