La propriété width définit la largeur d'un élément. Par défaut, c'est la largeur de la zone de contenu (comprise à l'intérieur de la boîte de remplissage (padding), de la bordure (border) et de la boîte de marge (margin) de l'élément) mais si box-sizing vaut border-box, ce sera la largeur de la zone incluant la bordure.

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

Syntaxe

/* 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

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
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
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
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
La largeur intrinsèque préférée.
min-content
La largeur intrinsèque minimum.
available
La largeur du bloc contenant le bloc courant, moins la marge horizontale, la bordure et le remplissage (padding).
fit-content
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

Syntaxe formelle

[ <length> | <percentage> ] && [ border-box | content-box ]? | available | min-content | max-content | fit-content | auto

Exemples

Valeur par défaut

p.goldie {
  background: gold;
}
<p class="goldie">La communauté Mozilla ressemble à un panda roux.</p>

En utilisant les pixels et les em

.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;
}
<div class="longueur_px">Largeur mesurée en pixels</div>
<div class="longueur_em">Largeur mesurée en ems</div>

En utilisant les pourcentages

.pourcent {
  width: 20%;
  background-color: silver;
  border: 1px solid red;
}
<div class="pourcent">Largeur exprimée en pourcentages</div>

En utilisant max-content

p.maxgreen {
  background: lightgreen;
  width: intrinsic;           /* Safari/WebKit utilisent un nom non-standard */
  width: -moz-max-content;    /* Firefox/Gecko */
  width: -webkit-max-content; /* Chrome */
}
<p class="maxgreen">La communauté Mozilla ressemble à un panda roux.</p>

En utilisant min-content

p.minblue {
  background: lightblue;
  width: -moz-min-content;    /* Firefox */
  width: -webkit-min-content; /* Chrome */
}
<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

Spécification État Commentaires
CSS Basic Box Model
La définition de 'width' dans cette spécification.
Version de travail Ajout des mots-clés max-content, min-content, available, fit-content, border-box et content-box.
CSS Transitions
La définition de 'width' dans cette spécification.
Version de travail width peut désormais être animée.
CSS Level 2 (Revision 1)
La définition de 'width' dans cette spécification.
Recommendation Précision sur les éléments auxquels peuvent être appliquée la propriété.
CSS Level 1
La définition de 'width' dans cette spécification.
Recommendation Définition initiale.

Valeur initialeauto
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éenon
Pourcentagesse rapporte à la largeur du bloc contenant
Médiavisuel
Valeur calculéeun pourcentage ou auto ou une longueur absolue
Type d'animationune longueur, pourcentage ou calc() ;
Ordre canoniquela longueur ou le pourcentage avant le mot-clé si les deux sont présents

Compatibilité des navigateurs

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple Oui12143.51
Animatable ? ?16 ? ? ?
max-content

46

22 -webkit-

Non3 -moz- ?15 -webkit-

6.1 -webkit-

21

min-content

46

222

Non3 -moz- ?15 -webkit-

6.1 -webkit-

22

available Non Non3 -moz- ? ? ?
fill-available22 -webkit- Non Non ? ?6.1 -webkit-
fit-content

46

22 -webkit-

Non3 -moz- Non15 -webkit- 6.1 -webkit-
content-box Non Non Non Non Non Non
border-box Non Non Non Non Non Non
fill46 Non ? ? ? ?
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple Oui Oui Oui4 Oui Oui Oui
Animatable ? ? ?16 ? ? ?
max-content4646 Non ? ? ?5.0
min-content4646 Non ? ? ?5.0
available ? ? Non ? ? ? Non
fill-available4646 Non ? ? ?5.0
fit-content4646 Non ? ? ?5.0
content-box ? ? Non ? ? ? Non
border-box ? ? Non ? ? ? Non
fill4646 Non ? ? ?5.0

1. Supported as intrinsic.

2. Supported as min-intrinsic.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, Sebastianz, teoli, FredB, Mgjbot, BenoitL, Fredchat, Kyodev
 Dernière mise à jour par : SphinxKnight,