CSS - Propriété box-sizing
Description de la propriété box-sizing.
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 la valeur par défaut soit content-box, il est plus instinctif 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
( * ).
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.
-
Reportez-vous à la description générale de ces valeurs.
Simulateur.
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.
box-sizing :
width:250px;
height:120px;
padding:10px;
border-width:5px;
width:250px;
height:120px;
padding:5px;
border-width:1px;
Prise en charge par les navigateurs.
Afficher le tableau de compatibilité (informations fournies par canIuse.com).
Voir aussi...
Dimensions et marges des blocs - Propriétés.
height: Hauteur de l'élément.margin: Résumé des quatre marges.margin-bottom: Marge du bas.margin-left: Marge de gauche.margin-right: Marge de droite.margin-top: Marge du haut.max-height: Hauteur maxi.max-width: Largeur maxi.min-height: Hauteur mini.min-width: Largeur mini.padding: Marges intérieures des quatre cotés.width: Largeur de l'élément.