MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

La propriété box-sizing est utilisée pour modifier le modèle de boîte CSS par défaut qui est utilisé pour calculer la largeur et la hauteur des éléments.

/* Valeurs avec un mot-clé */
box-sizing: content-box;
box-sizing: border-box;

/* Valeurs globales */
box-sizing: inherit;
box-sizing: initial;
box-sizing: unset;

En CSS, la largeur et la hauteur affectées à un élément s'appliquent par défaut à la boîte de contenu (content box) de l'élément. Si l'élément possède une bordure (border) ou du remplissage (padding), celui-ci est ajouté à la largeur et/ou à la hauteur de la boîte affichée à l'écran. Cela signifie qu'il faut ajuster les valeurs de hauteur et de largeur afin qu'elles permettent d'ajouter n'importe quelle bordure ou n'importe quel remplissage qui serait ajouté par la suite. Cette contrainte peut s'avérer complexe lorsqu'on implémente une mise en page adaptative.

La propriété box-sizing peut être utilisée afin d'ajuster ce comportement :

  • content-box est la valeur par défaut et correspond au comportement par défaut décrit ci-avant. Si on définit un élément avec une largeur de 100 pixels, la boîte de contenu de cet élément mesurera 100 pixels de large et la largeur de la bordure et/ou du remplissage sera alors ajoutée pour constituer la largeur finalement affichée.
  • border-box indique au navigateur de prendre en compte la bordure et le remplissage dans la valeur définie pour la largeur et la hauteur. Autrement dit, si on définit un élément avec une largeur de 100 pixels, ces 100 pixels inclueront la bordure et le remplissage éventuellement ajoutés et c'est le contenu de la boîte qui sera compressé pour absorber cette largeur supplémentaire. Cela permet généralement de simplifier le dimensionnement des éléments.

Certains auteurs recommandent d'utiliser fréquemment box-sizing: border-box pour l'ensemble des éléments.

L'exemple précédent illustre trois scénarios. Pour chacun, on a un élément <div> parent (avec une bordure orange) qui contient un élément <div>. L'élémenthe fils a width: 100% et un arrière-plan bleu.

  • Dans le premier scénario, on utilise la valeur par défaut box-sizing: content-box. L'élément fils n'a aucun remplissage ni aucune bordure et s'inscrit sans problème dans son élément parent.
  • Dans le deuxième scénario, on utilise la valeur par défaut box-sizing: content-box. L'élément fils possède ici un remplissage et une bordure supplémentaire. On voit alors que l'élément fils dépasse de l'élément parent car le calcul de la largeur se base sur la boîte de contenu à laquelle on rajoute la bordure et le remplissage.
  • Le troisième scénario utilise box-sizing: border-box. Ici l'élément fils s'inscrit correctement au sein de l'élément parent car width: 100% prend en compte l'épaisseur de la bordure et du remplissage.

Valeur initialecontent-box
Applicabilitétous les éléments acceptant une largeur ou une hauteur
Héritéenon
Médiavisuel
Valeur calculéecomme spécifié
Type d'animationdiscrète
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

La propriété box-sizing peut être définie avec l'un des mots-clés suivants.

Valeurs

content-box
C'est la valeur initiale et la valeur par défaut, spécifiée dans le standard CSS. Les propriétés width et height sont mesurées en incluant le contenu, mais pas la bordure, la marge extérieure ou intérieure. Les dimensions de l'élément sont donc calculées à partir de la hauteur et de la largeur du contenu (on ne tient pas compte de la bordure ou du remplissage (padding)).
border-box
Les propriétés width et height incluent le contenu, le remplissage (padding), la bordure, mais pas la marge. C'est le modèle de boîte utilisé par Internet Explorer lorsque le document est en mode de compatibilité (Quirks). La boîte de contenu ne peut pas être négative et est ramenée à 0 si nécessaire, il est donc impossible d'utiliser border-box pour faire disparaître l'élément. Les dimensions de l'élément sont calculées comme la somme de la bordure, du remplissage (padding) et du contenu.

Syntaxe formelle

content-box | border-box

Exemples

CSS

div.container {
  width:200;
  border:1em solid black;
}

div.split {
  box-sizing:border-box;
  width:50%;
  border:1em silver ridge;
  float:left;
}

HTML

<div class="container">
<div class="split">Ce div occupe la gauche.</div>
<div class="split">Ce div occupe la droite.</div>
</div>

Résultat

Spécifications

Spécification État Commentaires
CSS Basic User Interface Module Level 3
La définition de 'box-sizing' dans cette spécification.
Candidat au statut de recommandation Définition initiale.

Compatibilité des navigateurs

Fonctionnalité Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support simple 1.0 -webkit[1]
10.0
(Oui)-webkit
(Oui)

1.0 (1.7 ou moins)-moz[1]
29.0 (29.0)[3]

8.0[1]

7.0 3.0 (522)-webkit
5.1[2]
padding-box Pas de support Pas de support 1.0 (1.7 ou moins)-moz[1]
29.0 (29.0)
Retiré à partir de 50.0 (50.0)
Pas de support Pas de support Pas de support
Fonctionnalité Android Firefox Mobile (Gecko) Edge IE Phone Opera Mobile Safari Mobile
Support simple 2.1-webkit[1]
4.0
1.0 (1.0)-moz [1]
29.0 (29.0)[3]
(Oui)-webkit
(Oui)
9.0 (Oui) (Oui)
padding-box Pas de support 1.0 (1.0)-moz [1]
29.0 (29.0)
Retiré à partir de 50.0 (50.0)
Pas de support Pas de support Pas de support Pas de support

[1] box-sizing n'est pas respectée lorsque height est calculée depuis window.getComputedStyle() dans Internet Explorer, dans Chrome et dans Firefox jusqu'à la version 23. Edge n'illustre pas le problème. On notera que la propriété currentStyle propriétaire de Internet Explorer 9 renvoie la bonne valeur de height.

[2] Le préfixe -webkit a été retirée avec ces modifications : 534.12.

[3] En plus de la version préfixée par -moz, Gecko 44.0 (Firefox 44.0 / Thunderbird 44.0 / SeaMonkey 2.41) prend en charge la version préfixée par -webkit à des fins de compatibilité web grâce à la préférence layout.css.prefixes.webkit dont la valeur par défaut vaut false. Depuis Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46), cette valeur par défaut est passée à true.

Voir aussi

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : SphinxKnight, pldz, lehollandaisvolant, Sebastianz, teoli, jsilvestre, tregagnon, FredB
 Dernière mise à jour par : SphinxKnight,