width

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

La propriété width permet de définir la largeur de la boîte du contenu d'un élément. Par défaut, sa valeur est auto, c'est à dire la largeur automatiquement calculée de son contenu. Si box-sizing vaut border-box, la valeur appliquée incluera les dimensions de la boîte d'encadrement (border) et de la boîte de remplissage (padding).

Exemple interactif

Note : Les propriétés min-width et max-width permettent de surcharger width.

Syntaxe

css

/* Valeurs de longueur */
/* Type <length> */
width: 300px;
width: 25em;

/* Valeurs en pourcentages */
/* Type <percentage> */
width: 75%;

/* Avec un mot-clé */
width: 25em border-box;
width: 75% content-box;
width: max-content;
width: min-content;
width: available;
width: fit-content;
width: auto;

/* Valeurs globales */
width: inherit;
width: initial;
width: unset;

La propriété width se définit avec

un des mots-clés suivants : available, min-content, max-content, fit-content, auto.
ou une valeur de longeur (<length>) ou de pourcentage (<percentage>) éventuellement suivie par le mots-clé border-box ou content-box.

Valeurs

<length>

Voir <length> pour les unités qui peuvent être utilisées.

<percentage>

Permet de définir la largeur en pourcentages (<percentage>) par rapport à la largeur du bloc contenant le bloc courant. Si la largeur du bloc englobant dépend de la largeur de l'élément, la disposition est indéfinie.

border-box Expérimental

Si cette valeur est présente, la longueur (<length>) ou le pourcentage (<percentage>) est appliqué à la boîte de bordure (border) de l'élément.

content-box Expérimental

Si cette valeur est présente, la longueur (<length>) ou le pourcentage (<percentage>) est appliqué à la boîte de contenu de l'élément.

auto

Le navigateur calculera et sélectionnera une largeur pour l'élément.

fill Expérimental

Utilise la taille fill-available dans l'axe du sens de lecture ou la taille fill-available dans l'axe perpendiculaire au sens de lecture selon le mode d'écriture.

max-content Expérimental

La largeur intrinsèque préférée.

min-content Expérimental

La largeur intrinsèque minimum.

available Expérimental

La largeur du bloc contenant le bloc courant, moins la marge horizontale, la bordure et le remplissage (padding).

fit-content Expérimental

La quantité la plus grande entre :

La largeur intrinsèque minimum
Le minimum entre la largeur intrinsèque préférée et la largeur disponible

Définition formelle

Valeur initiale	`auto`
Applicabilité	tous les éléments sauf les éléments en ligne non remplacés, les lignes de tableaux et les groupes de lignes
Héritée	non
Pourcentages	se rapporte à la largeur du bloc contenant
Valeur calculée	un pourcentage ou `auto` ou une longueur absolue
Type d'animation	une longueur, pourcentage ou calc() ;

Syntaxe formelle

width = 
  auto                                      |
  <length-percentage [0,∞]>                 |
  min-content                               |
  max-content                               |
  fit-content( <length-percentage [0,∞]> )  |
  <calc-size()>                             |
  <anchor-size()>                           

<length-percentage> = 
  <length>      |
  <percentage>  

<calc-size()> = 
  calc-size( <calc-size-basis> , <calc-sum> )  

<anchor-size()> = 
  anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )  

<calc-size-basis> = 
  <intrinsic-size-keyword>  |
  <calc-size()>             |
  any                       |
  <calc-sum>                

<calc-sum> = 
  <calc-product> [ [ '+' | '-' ] <calc-product> ]*  

<anchor-name> = 
  <dashed-ident>  

<anchor-size> = 
  width        |
  height       |
  block        |
  inline       |
  self-block   |
  self-inline  

<calc-product> = 
  <calc-value> [ [ '*' | '/' ] <calc-value> ]*  

<calc-value> = 
  <number>        |
  <dimension>     |
  <percentage>    |
  <calc-keyword>  |
  ( <calc-sum> )  

<calc-keyword> = 
  e          |
  pi         |
  infinity   |
  -infinity  |
  NaN

Exemples

Valeur par défaut

css

p.goldie {
  background: gold;
}

html

<p class="goldie">La communauté Mozilla ressemble à un panda roux.</p>

En utilisant les pixels et les `em`

css

.longueur_px {
  width: 200px;
  background-color: red;
  color: white;
  border: 1px solid black;
}

.longueur_em {
  width: 20em;
  background-color: white;
  color: red;
  border: 1px solid black;
}

html

<div class="longueur_px">Largeur mesurée en pixels</div>
<div class="longueur_em">Largeur mesurée en ems</div>

En utilisant les pourcentages

css

.pourcent {
  width: 20%;
  background-color: silver;
  border: 1px solid red;
}

html

<div class="pourcent">Largeur exprimée en pourcentages</div>

En utilisant `max-content`

css

p.maxgreen {
  background: lightgreen;
  width: intrinsic; /* Safari/WebKit utilisent un nom non-standard */
  width: -moz-max-content; /* Firefox/Gecko */
  width: -webkit-max-content; /* Chrome */
}

html

<p class="maxgreen">La communauté Mozilla ressemble à un panda roux.</p>

En utilisant `min-content`

css

p.minblue {
  background: lightblue;
  width: -moz-min-content; /* Firefox */
  width: -webkit-min-content; /* Chrome */
}

html

<p class="minblue">La communauté Mozilla ressemble à un panda roux.</p>

Accessibilité

Il faut s'assurer que les éléments sur lesquels on utilise width ne sont pas tronqués et ne masquent pas d'autre contenu sur la page lorsque l'utilisateur zoome afin d'agrandir la taille du texte.

Spécifications

Specification
CSS Box Sizing Module Level 4 # width-height-keywords
CSS Box Sizing Module Level 4 # sizing-values

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi

Le modèle de boîtes, height, box-sizing, min-width, max-width