Box-sizing - Propriété CSS
Résumé des caractéristiques de la propriété box-sizing
content-box | border-boxcontent-boxbox-sizing passe d'une valeur à l'autre sans transition.Schéma syntaxique de box-sizing.
box-sizingCliquez sur le schéma pour plus de détails sur les valeurs
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: 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.
Valeurs communes à toutes les propriétés :
box-sizing: initial (content-box)
box-sizing: inherit
box-sizing: revert
box-sizing: revertLayer
box-sizing: unset
Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.
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.
Il est rare de voir une propriété aussi bien reconnue par tous les navigateurs, y compris les navigateurs marginaux.
box-sizing et gestion correcte de son fonctionnement.box-sizingNavigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Internet Explorer
KaiOS Browser
Opéra Mobile
Opéra
Firefox pour Androïd
Samsung Internet
Chrome
Edge
Firefox
Androïd Brower
Chrome pour Androïd
Baidu Browser
QQ Browser
Safari
Safari sur IOS
UC Browser pour Androïd
Opéra mini
Historique de la propriété box-sizing.
Bien que ancienne, la définition de la propriété box-sizing n'a pas évolué depuis.
-
Module CSS - Interface utilisateur de base - Niveau 3
Introduction de la propriétébox-sizinget d'un nouveau mode de calcul des dimensions des éléments.
02 Août 2002Document de travail.
07 Juillet 2015Candidat à la recommandation.
14 Décembre 2017Proposé à la recommandation.
21 Juin 2018Recommandation. -
Module CSS - Dimensionnement des blocs Niveau 3
Ajout de la propriétébox-sizing(une définition antérieure de cette propriété se trouvait dans le moduleCSS-UI-3.27 Septembre 2012Document de travail. -
Module CSS - Dimensionnement des blocs Niveau 4
Pas de changement.26 Mai 2020Document de travail.
Voir aussi...
Le module CSS Box Sizing Module de la spécification CSS (W3C) décrit les méthodes pour dimensionner les éléments et les propriétés en rapport.