`Box-sizing` - Propriété CSS

box-sizing

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

Description rapide

Définit le mode de calcul des dimensions de blocs : en incluant ou non les bordures et les marges intérieures.

Statut

Standard

Utilisable sur

HTML

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)

🡇

🡅

CSS Box Sizing Module Level 3

Statut du document: WD (document de travail)

CSS Basic User Interface Module Level 3

Statut du document: REC (recommandation)

Schéma de la syntaxe de `box-sizing`.

Schéma syntaxique de la propriété box-sizing.
Cliquez sur les liens du schéma pour plus de précisons sur les valeurs.
Télécharger le schéma en SVG.

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.

Valeurs 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: 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.

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 : à dimensions égales, les blocs sont identiques

box-sizing :

content-box

border-box

width:250px;
height:100px;
padding:10px;
border-width:10px;

width:250px;
height:100px;
padding:5px;
border-width:5px;

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.

Colonne 1

Prise en charge de la propriété box-sizing et gestion correcte de son fonctionnement.

Propriété
box-sizing

Estimation de la prise en charge globale.

98%

Navigateurs 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

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Histoire 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

Ce module de spécification regroupe les propriétés qui interagissent avec l'espace utilisateur (UI) : cursor, caret-color, etc. Il définit également les propriétés de contour outline....

Concernant box-sizing. Introduction de la propriété box-sizing et d'un nouveau mode de calcul des dimensions des éléments.

02 Août 2002
Document de travail.
07 Juillet 2015
Candidat à la recommandation.
14 Décembre 2017
Proposé à la recommandation.
21 Juin 2018
Recommandation.
Module CSS - Dimensionnement des blocs Niveau 3

Concernant box-sizing. Ajout de la propriété box-sizing (une définition antérieure de cette propriété se trouvait dans le module CSS-UI-3.

27 Septembre 2012
Document de travail.
Module CSS - Dimensionnement des blocs Niveau 4

Concernant box-sizing. Pas de changement.

26 Mai 2020
Document de travail.

Voir aussi...

Le module module CSS - Dimensionnement des blocs de la spécification CSS (W3C) décrit les méthodes pour dimensionner les éléments et les propriétés en rapport.