Width, inline-size et block-size.

Schéma syntaxique de width.

Sur le schéma, les termes en gras sont les mots prédéfinis de CSS, les autres termes sont décrits ci-dessous :

• length est une valeur numérique suivie d'une des unités de dimension.
• % est un pourcentage calculé par rapport à la largeur de l'élément parent.

Description de la propriété width.

La propriété width définit la largeur de l'élément.

Cette propriété est dite "physique" car elle agit sur la largeur de l'élément quelque soit le mode d'écriture (les langues asiatiques par exemple s'écrivent du haut vers le bas).

Mode de calcul des dimensions.

Attention ! La propriété box-sizing modifie la façon de calculer les dimensions d'un élément :

La propriété width définit la largeur du contenu de l'élément, sass inclure les marges intérieures nil l'épaisseur de la bordure.

La propriété width définit la largeur de l'élément incluant les marges intérieures et l'épaisseur de la bordure.

Il faut également prendre en compte les propriétés min-width, max-width qui peuvent imposer des contraintes sur la largeur de l'élément, et qui sont prioritaires.

Prise en charge de la langue.

Afin de faciliter la gestion des langues non latines, deux propriétés permettent de définir les dimensions d'un élément relativement au mode d'écriture utilisé. Ce deux propriétés sont :

• inline-size : dimension de l'élément dans la direction d'écriture des lignes. Pour les langues latines cette propriété définit la largeur.
• block-size : dimension de l'élément dans la direction des blocs. Pour les langues latines cette propriété définit la hauteur de l'élément.

Si vous souhaitez plus d'explications sur la gestion des langues non latines, reportez-vous au tutoriel concernant les modes d'écriture.

Valeurs pour width.

Les valeurs décrites ci-après s'appliquent aussi bien à la propriété width qu'à la propriété logique correspondante : inline-size ou block-size.

• width: auto;

  Le navigateur détermine la largeur de l'élément. En général la largeur est égale à celle du parent moins les marges intérieures de ce dernier (padding), moins les marges de l'élément (margin). Sur l'exemple ci-dessous, un trait fin sépare les marges intérieures du parent et les marges de l'élément.
• width: 150px;

  La largeur de l'élément est fixée à la dimension indiquée. C'est un nombre positif ou égal à 0, suivi d'une unité de dimension (voir les unités de dimension). En fonction de la valeur indiquée, l'élément peut déborder de son parent.

  Si la valeur est exprimée en pourcentages, ceux-ci sont calculés par rapport à la largeur du parent moins les marges intérieures de ce dernier.
• width: min-content; width: max-content; width: fit-content; width: fit-content(d); ⚠

  Avec l'une de ces trois valeurs, la largeur de l'élément est déterminée d'après son contenu :

  • min-content : largeur du contenu après avoir ajouté le plus possible de retours à la ligne. Reportez-vous à la valeur min-content pour une description plus précise.
  • max-content : largeur du contenu sans retours à la ligne, sauf ceux qui sont explicitement écrits dans le code source (HTML). Voyez la page sur max-content pour une description complète.
  • La valeur fit-content ou la fonction du même nom devraient être acceptées, mais il a encore des problèmes de compatibilité avec la fonction. Avec fit-content, la largeur de l'élément est déterminée d'après son contenu, mais sans dépasser la place disponible ni la dimension d indiquée en paramètre de la fonction. Des retours à la ligne peuvent être insérés si la longueur du texte dépasse cette limite.
    Reportez-vous à la description de la valeur fit-content ou de la fonction fit-content() pour une description complète.
• width: initial; (auto) width: inherit; width: revert; width: revertLayer; width: unset;

  Ces valeurs sont décrites plus en détail sur leur page respective : initial, inherit, revert, revert-layer, unset.

Animation de la propriété width.

La propriété width est parmi celles qui sont le plus souvent animées pour des effets visuels divers.

Manipulation des largeurs par programme.

Les exemples de code ci-dessous sont donnés avec la propriété width mais seront facilement transposables aux propriétés logiques équivalentes inline-size et block-size.

Changement de la valeur de width avec Javascript.

Deux syntaxes sont possibles.

let el = document.getElementById('id'); el.style['width'] = '50%'; // ou let el = document.getElementById('id'); el.style.width = '50%';

Récupération de la valeur affectée à width avec Javascript.

Le code ci-dessous fonctionne si la propriété a été affectée directement à l'élément lui-même via son attribut style, et non pas en passant par un sélecteur CSS. Les valeurs affectées par le code ci-dessus sont également récupérables de cette façon.

let el = document.getElementById('id'); let value = el.style['width']; // ou let el = document.getElementById('id'); let value = el.style.width;

Récupération de la valeur calculée de width.

La valeur calculée est celle qui résulte de l'évaluation des unités relatives (en particulier le pourcentage) et de la prise en compte éventuelle des valeurs héritées. A défaut, la valeur calculée sera la valeur initiale de la propriété, soit auto dans le cas de width.

let el = document.getElementById('id'); let value = window.getComputedStyle(el).getPropertyValue('width');

Changement de la valeur de width avec JQuery.


$('#id').css('width', '50%');


Récupération de la valeur calculée de width avec JQuery.

let value = $('#id').css('width');

Autres exemples de code.

D'autres exemples de code Javascript interagissant avec les styles CSS sont donnés sur la page Javascript et CSS.

Testez vous-même.

Les boutons ci-dessous appliquent la valeur saisie à la propriété width 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 sérialisée la valeur de width. On constate en particulier que toutes les unités sont converties en pixels.

Simulateur avec la propriété width.

Le simulateur ci-dessous permet de faire la différence entre les propriétés physiques, comme width, et les propriétés logiques comme inline-size qui s'adaptent au mode d'écriture de la langue utilisée.

Il peut être utile également pour se familiariser avec les unités de dimensions les moins courantes, comme vw, vh, vmin, etc. Voir les unités de dimension.

Prise en charge de width par les navigateurs.

Toutes ces propriétés sont correctement prises en charge par tous les navigateurs actuels. Cependant Internet Explorer ne traite pas les propriétés logiques (qui prennent en compte le sens d'écriture) mais IE n'est plus utilisé.

1

Propriété
width

2

Propriété
inline-size

3

Propriété
block-size

Estimation de la prise en charge globale.

96%

95%

95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Samsung Internet

Safari

Safari sur IOS

Opéra

Firefox pour Androïd

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

KaiOS Browser

Opéra mini

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

Caniuse

Caniuse

Caniuse

Historique de la propriété width.

• CSS 1 - Spécification concernant les feuilles de styles en cascade - Version 1

  Définition initiale de la propriété width.
  La largeur d'un élément est définie comme étant la largeur du contenu, à l'exclusion des marges intérieures et de l'épaisseur de la bordure.
  

  17 Novembre 1995

  Document de travail.

  

  12 Novembre 1996

  Proposé à la recommandation.

  

  17 Décembre 1996

  Recommandation.

  

  13 Septembre 2018

  Ancienne spécification, déclarée obsolète.

• CSS 2.1 - Spécification concernant les feuilles de styles en cascade - Révision 1

  Ajout de la valeur inherit pour la propriété width permettant de forcer l'héritage de la valeur du parent.
  Introduction de la propriété box-sizing qui modifie la méthode de calcul des dimensions d'un élément.
  

  04 Novembre 1997

  Document de travail.

  

  24 Mars 1998

  Proposé à la recommandation.

  

  11 Mai 1998

  Recommandation.

• Module CSS - Propriétés et valeurs logiques - Niveau 1

  Introduction de deux propriétés logiques pour définir les dimensions d'un élément contextuellement par rapport au mode d'écriture de la langue utilisée : inline-size et block-size.
  

  18 Mai 2017

  Document de travail.

  

  

  

• Module CSS - Dimensionnement des blocs Niveau 3

  Prise en charge par la propriété width des valeurs définissant une dimension par rapport au contenu : min-content, max-content, etc.
  

  27 Septembre 2012

  Document de travail.

  

  

  

• Module CSS - Dimensionnement des blocs Niveau 4

  Pas de changement concernant la propriété width.
  

  26 Mai 2020

  Document de travail.

  

  

  

Voir aussi, concernant la dimension des éléments.

Les propriétés width, inline-size et block-size sont décrites dans le module CSS Box Sizing Module. De nombreuses autres définitions participent aux dimensions d'un élément.

Propriétés :

Fonctions :

Valeurs: