Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

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.

Box-sizing Box-sizing

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.

  • box-sizing: inherit | initial | unset;

    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 les versions antérieures   Afficher la version à venir  

Voir aussi...

Dimensions et marges des blocs - Propriétés.