Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

La propriété width définit la largeur de la zone dédiée au contenu d'un élément. La zone de contenu est 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.

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

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
Animableoui, comme une longueur, pourcentage ou calc() ; quand les deux valeurs sont des longueurs, elles sont interpolées comme des longueurs ; quand les deux valeurs sont des pourcentages, elles sont interpolées comme des pourcentages ; sinon, les deux valeurs sont converties dans une fonction calc() qui est la somme d'une longueur et d'un pourcentage (chaque valeur pouvant être à zéro), et cette fonction calc() interpole chaque moitié comme un nombre réel.
Ordre canoniquela longueur ou le pourcentage avant le mot-clé si les deux sont présents

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;

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>

Spécifications

Spécification Statut 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.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support simple (Oui) 1.0 (1.7 ou moins) 4 3.5 1.0 (85)
Animation de cette propriété ? 16.0 (16.0) ? ? ?
max-content 22.0 -webkit
46.0 [1]
3.0 (1.9)-moz ? 15 -webkit 2.0 (421) (intrinsic value)
6.1 -webkit
min-content

22.0 [4] -webkit
46.0 [1]

3.0 (1.9) -moz ? 15 -webkit 2.0 (421) (min-intrinsic value)
6.1 -webkit
available Pas de support 3.0 (1.9) -moz ? ? ?[1]
fill-available 22.0 -webkit Pas de support ? ? 6.1 -webkit
fit-content 22.0 [4] -webkit
46.0 [1]
3.0 (1.9) -moz ? 15 -webkit 6.1 -webkit[2]
border-box et content-box Pas de support Pas de support Pas de support Pas de support Pas de support
fill 46.0 ? ? ? ?
Fonctionnalité Android Webview Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile Chrome pour Android
Support simple ? (Oui) ? ? ? ? (Oui)
Animation de cette propriété ? ? 16.0 (16.0) ? ? ? ?
max-content ? 46.0 [1] ? ? ? ? 46.0 [1]
min-content ? 46.0 [1] ? ? ? ? 46.0 [1]
available ? ? ? ? ? ? ?
fill-available ? 46.0 [1] ? ? ? ? 46.0 [1]
fit-content ? 46.0 [1] ? ? ? ? 46.0 [1]
border-box et content-box ? ? ? ? ? ? ?
fill Pas de support 46.0 ? ? ? ? ?

[1] WebKit implémente une variation de cette valeur sous le nom fill-available (disponible en décembre 2013).

[2] Les versions antérieures de WebKit implémentaient une version antérieure de cette valeur avec le nom intrinsic, fit-content est également implémenté depuis la version 6.1.

[3] Non-préfixée.

[4] Les anciens moteurs WebKit supportent les mots-clés intrinsic et min-intrinsic mais ceux-ci ont été retirés avec Chrome 48.

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,