`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

Accéder à la propriété `box-sizing` par programme.

Avec Javascript, modifier la valeur de `box-sizing`.

En Javascript, voici comment modifier la valeur de box-sizing. Javascript propose une syntaxe avec la notation typique de CSS, en kebab-case, et une autre syntaxe avec la notation en camel-case.


	let el = document.getElementById('id');
	el.style['box-sizing'] = 'content-box';
	// ou
	let el = document.getElementById('id');
	el.style.boxSizing = 'content-box';

Avec Javascript, lire la valeur de `box-sizing`.

La propriété doit avoir été affectée directement à l'élément lui-même via son attribut style, et pas en passant par un sélecteur CSS.


	let el = document.getElementById('id');
	let value = el.style['box-sizing'];
	// ou
	let el = document.getElementById('id');
	let value = el.style.boxSizing;

Avec Javascript, lire la valeur calculée de `box-sizing`.

La valeur calculée est celle qui résulte du processus suivant :

Valeur affectée à l'élément lui même par son attribut style ou un sélecteur CSS.
Valeur héritée par le biais de la cascade.
Enfin à défaut, valeur initiale de la propriété (content-box dans le cas de [box-sizing}).


	let el = document.getElementById('id');
	let value = window.getComputedStyle(el).getPropertyValue('box-sizing');

Avec JQuery, modifier la valeur de `box-sizing`.

JQuery et une libraire écrite en Javascript. Il propose des syntaxes généralement plus courtes que celles de Javascript. Voici comment écrire une valeur pour box-sizing et relire sa valeur calculée.


 $('#id').css('box-sizing', 'content-box');
 // ou
 $('#id').css('boxSizing', 'content-box');

Avec JQuery, lire la valeur calculée de `box-sizing`.


	let value = $('#id').css('box-sizing');

Autres exemples de code.

D'autres exemples de code Javascript et JQuery sont donnés sur la page Javascript et CSS : ajouter une feuille de styles à la page, ajouter ou supprimer des classes, etc.

Testez vous-même.

Les boutons ci-dessous appliquent la valeur saisie à la propriété box-sizing et affichent ensuite soit la valeur telle qu'elle a été appliquée, soit la valeur calculée. Cette deuxième option permet de voir comment est mémorisée (sérialisée) la valeur de box-sizing. Dans le cas de box-sizing ces deux valeurs sont identiques, sauf lorsqu'on essaie d'affecter une valeur incorrecte : la valeur affectée est alors vide, tandis que la valeur calculée revient sur la valeur par défaut.

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.