box-sizing - Propriété CSS
Résumé des caractéristiques de la propriété box-sizing
content-box
| border-box
content-box
box-sizing
passe d'une valeur à l'autre sans transition.A quoi sert de la propriété box-sizing
?
La propriété box-sizing
détermine comment sont calculées les dimensions des blocs.
Plus précisément : est-ce que les bordures et les marges intérieures ( padding
) sont
comptées dans la largeur ( width
) et la hauteur ( height
) des blocs.
Cette propriété ne peut prendre que une des deux valeurs content-box
ou border-box
.
La différence est illustrée ci-dessous, elle concerne la façon de déterminer la largeur et la hauteur de
l'élément.
Bien que, pour des raisons historiques, la valeur par défaut soit content-box
, il est plus intuitif
de raisonner dans le mode border-box
.
Cette propriété est une des rares qui puissent s'appliquer sans inconvénient au sélecteur étoile
( *
), d'autant plus que ce serait vraiment se compliquer la vie de mixer dans une même page
les deux modes de dimensionnement.
Syntaxes pour box-sizing
.
box-sizing:
;
- box-sizing: content-box;
Valeur par défaut. C'est le contenu de l'élément qui détermine ses dimensions. Autrement dit la marge intérieure (
padding
) et l'épaisseur de la bordure ne sont pas comptées dans les dimensions de l'élément. - box-sizing: border-box;
Les dimensions du bloc sont comptées en incluant les marges intérieures (
padding
) et l'épaisseur de la bordure. - box-sizing: padding-box; ✗
Les dimensions du bloc sont comptées en incluant les marges intérieures (
padding
) et en excluant l'épaisseur de la bordure.Cette valeur avait été proposée par Firefox mais n'a pas été standardisée. Il ne faut plus l'utiliser.
- box-sizing:
initial
; box-sizing:inherit
; box-sizing:revert
; box-sizing:revert-layer
; box-sizing:unset
;La valeur initiale est :
.content-box
Animation de box-sizing.
L'animation de la propriété box-sizing
semble peu pertinente mais est néanmoins possible :
la propriété passera sans transition d'une valeur à l'autre.
Exemple interactif.
En mode content-box
ces deux éléments n'ont pas la même taille à l'affichage bien que
leurs propriétés width
et height
aient des valeurs identiques.
C'est dû au fait qu'ils n'ont pas les mêmes épaisseurs de bordure, ni les mêmes marges intérieures.
La valeur border-box
donne un comportement plus intuitif.
width:250px;
height:120px;
padding:10px;
border-width:5px;
width:250px;
height:120px;
padding:5px;
border-width:1px;
Prise en charge par les navigateurs.
box-sizing
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
Oméra mini
Voir aussi, dans le même module de standardisation que box-sizing
.
Les spécifications CSS éditées par le W3C sont organisées en modules. box-sizing
fait partie du Module CSS - Dimensionnement des blocs (CSS Box Sizing Module). Les définitions suivantes sont également décrites dans ce même module.