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 :

box-sizing - Propriété CSS

box-sizing

Résumé des caractéristiques de la propriété box-sizing

Description rapide
Mode de calcul des dimensions de blocs.
Statut
Standard
Type de valeur
Boîte
Valeurs prédéfinies
content-box | border-box
Pourcentages
Ne s'appliquent pas.
Valeur initiale
content-box
Héritée par défaut
Non
Type d'animation
Discrète : lors d'une animation, la propriété box-sizing passe d'une valeur à l'autre sans transition.
Module W3C
Module CSS - Dimensionnement des blocs
Références (W3C)
Statut du document:: WD (document de travail)

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.

Box-sizing: content-box Box-sizing: border-box

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:
Schéma syntaxique de la propriété box-sizingSyntaxe de box-sizing, définissant la logique de dimensionnement des blocs en CSS. content-box content-box border-box border-box
;
  • 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.

Animation du mode de dimensionnement

 

 

 

 

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.

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.

1
box-sizing
Estimation de la prise en charge en pourcentage du parc actuel.
99%

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.

Propriétés.

Définit le ratio entre la largeur et la hauteur de l'élément.
Définit la dimension d'un l'élément suivant la direction des blocs.
Hauteur de l'élément.
Définit la dimension de l'élément dans la direction des lignes.
Définit la hauteur maximale de l'élément.
Définit la largeur maximale de l'élément.
Définit la hauteur minimale de l'élément.
Définit la largeur minimale de l'élément.
Largeur de l'élément.

Fonctions.

Calcule une dimension en fonction du contenu et de limites.