Propriété box-sizing CSS

Définition et utilisation

La propriété box-sizing vous permet de définir de manière spécifique comment un élément particulier correspond à une zone spécifique.

Par exemple, si vous avez besoin de placer deux encadrés adjacents, vous pouvez définir box-sizing sur "border-box". Cela permet au navigateur d'afficher un cadre avec une largeur et une hauteur définies, et d'inclure les bords et les marges dans le cadre.

Veuillez également consulter :

Tutoriel CSS3 :Interface utilisateur CSS3

Manuel de référence HTML DOM :Propriété boxSizing

Exemple

Définit deux encadrés adjacents :

div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
float:left;
}

Essayez-le vous-même

Il y a plus d'exemples en bas de la page.

Syntaxe CSS

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

Valeur de l'attribut

Valeur Description
content-box

C'est le comportement de largeur et de hauteur réglementé par CSS2.1.

La largeur et la hauteur sont appliquées séparément au cadre de contenu de l'élément.

Les marges et les bords de l'élément sont dessinés en dehors de la largeur et de la hauteur.
border-box

La largeur et la hauteur définies pour l'élément déterminent le boîtier de l'élément.

C'est-à-dire, toute marge et bord spécifiée pour l'élément sera dessinée à l'intérieur des largeur et hauteur définis.

Le largeur et la hauteur du contenu peuvent être obtenues en soustrayant les bords et les marges du largeur et de la hauteur définis.
inherit Définit que la valeur de la propriété box-sizing doit être héritée de l'élément parent.

Détails techniques

Valeur par défaut : content-box
Héritabilité : non
Version : CSS3
Syntaxe JavaScript : object.style.boxSizing="border-box"

Prise en charge du navigateur

Les numéros dans le tableau indiquent la première version du navigateur qui prend en charge cette propriété en totalité.

Les nombres avec -webkit- ou -moz- sont les premières versions utilisant les préfixes.

Chrome IE / Edge Firefox Safari Opera
10.0
4.0 -webkit-		 8.0 29.0
2.0 -moz-		 5.1
3.2 -webkit-		 9.5