width
=====

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,∞]> )    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

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.

* Comprendre les règles WCAG 1.4
* *Understanding Success Criterion 1.4.4 | Understanding WCAG 2.0* (en anglais)
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 with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

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