box-sizing

La propriété CSS box-sizing définit la façon dont la hauteur et la largeur totale d'un élément est calculée (avec le modèle de boîte CSS).

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.

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.

Note : Il est souvent utile de définir box-sizing à border-box aux éléments de mise en page. Cela facilite grandement la gestion de la taille des éléments et élimine généralement un certain nombre d'écueils que vous pouvez rencontrer lors de la mise en page de votre contenu.  D'autre part, lors de l'utilisation de la position: relative ou position: absolute, l'utilisation de box-sizing: content-box permet aux valeurs de positionnement d'être relatives au contenu, et indépendantes des changements de taille des bordures et de la taille de la marge interne, ce qui est parfois souhaitable.

Syntaxe

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

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

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 le remplissage, 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)). Ainsi, .box {width: 350px; border:10px solid black;} fournira une boîte dont la largeur vaut  370px.
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.

Ici, les dimensions de l'élément sont calculées comme suit : largeur = bordure + marge interne + largeur du contenu, et hauteur = bordure + marge interne + hauteur du contenu.

Syntaxe formelle

content-box | border-box

Note : La valeur padding-box a été dépréciée.

Exemples

CSS

div {
  width: 160px;
  height: 80px;
  padding: 20px;
  border: 8px solid red;
  background: yellow;
}

.content-box { 
  box-sizing: content-box; 
  /* Largeur totale : 160px + (2 * 20px) + (2 * 8px) = 216px
     Hauteur totale : 80px + (2 * 20px) + (2 * 8px) = 136px
     Largeur de la boîte de contenu : 160px
     Hauteur de la boîte de contenu : 80px */
}

.border-box { 
  box-sizing: border-box;
  /* Largeur totale : 160px
     Hauteur totale : 80px
     Largeur de la boîte de contenu : 160px - (2 * 20px) - (2 * 8px) = 104px
     Hauteur de la boîte de contenu : 80px - (2 * 20px) - (2 * 8px) = 24px */
}

HTML

<div class="content-box">Content box</div>
<br>
<div class="border-box">Border box</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.
Recommendation Définition initiale.
Valeur initialecontent-box
Applicabilitétous les éléments acceptant une largeur ou une hauteur
Héritéenon
Valeur calculéecomme spécifié
Type d'animationdiscrète

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
box-sizingChrome Support complet 10
Notes
Support complet 10
Notes
Notes box-sizing is not respected when the height is calculated from window.getComputedStyle().
Support complet 1
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Edge Support complet 12
Support complet 12
Support complet 12
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Firefox Support complet 29
Support complet 29
Support complet 1
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
Notes Before Firefox 23, box-sizing is not respected when the height is calculated from window.getComputedStyle().
Support complet 49
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Support complet 44
Préfixée Désactivée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Désactivée From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Support complet 8
Notes
Support complet 8
Notes
Notes box-sizing is not respected when the height is calculated from window.getComputedStyle().
Opera Support complet 7Safari Support complet 5.1
Support complet 5.1
Support complet 3
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
WebView Android Support complet 4
Notes
Support complet 4
Notes
Notes box-sizing is not respected when the height is calculated from window.getComputedStyle().
Support complet 2
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Chrome Android Support complet 18
Notes
Support complet 18
Notes
Notes box-sizing is not respected when the height is calculated from window.getComputedStyle().
Support complet 18
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Firefox Android Support complet 29
Support complet 29
Support complet 4
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
Notes Before Firefox 23, box-sizing is not respected when the height is calculated from window.getComputedStyle().
Support complet 49
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Support complet 44
Préfixée Désactivée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Désactivée From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Support complet 14
Notes
Support complet 14
Notes
Notes box-sizing is not respected when the height is calculated from window.getComputedStyle().
Support complet 14
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Safari iOS Support complet 6
Support complet 6
Support complet 1
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Samsung Internet Android Support complet 1.0
Notes
Support complet 1.0
Notes
Notes box-sizing is not respected when the height is calculated from window.getComputedStyle().
Support complet 1.0
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
padding-box
ObsolèteNon-standard
Chrome Aucun support NonEdge Aucun support NonFirefox Aucun support 1 — 50IE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonFirefox Android Aucun support 4 — 50Opera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
Obsolète. Les nouveaux sites web ne doivent pas utiliser cette fonctionnalité.
Obsolète. Les nouveaux sites web ne doivent pas utiliser cette fonctionnalité.
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.

Voir aussi