Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.
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. Il est possible d'utiliser cette propriété pour émuler le comportement des navigateurs qui n'appliquent pas correctement la spécification du modèle de boîte CSS.
Valeur initiale | content-box |
---|---|
Applicabilité | tous les éléments acceptant une largeur ou une hauteur |
Héritée | non |
Média | visuel |
Valeur calculée | comme spécifié |
Type d'animation | discrète |
Ordre canonique | l'ordre unique et non-ambigu défini par la grammaire formelle |
Syntax
/* Valeurs avec un mot-clé */ box-sizing: content-box; box-sizing: border-box; /* Valeurs globales */ box-sizing: inherit; box-sizing: initial; box-sizing: unset;
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
etheight
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
etheight
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'utiliserborder-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. padding-box
- Les propriétés
width
etheight
incluent le contenu, le remplissage (padding) mais pas la bordure ni la marge. Seule Firefox a implémenté cette valeur et elle a été retirée avec Firefox 50.
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) |
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) | 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] |
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 |
[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
.