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).

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 Intrinsic & Extrinsic Sizing Module Level 3
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

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
widthChrome Support complet 1Edge Support complet 12Firefox Support complet 1IE Support complet 4Opera Support complet 3.5Safari Support complet 1WebView Android Support complet 1Chrome Android Support complet 18Firefox Android Support complet 4Opera Android Support complet 10.1Safari iOS Support complet 1Samsung Internet Android Support complet 1.0
Animatable
Expérimentale
Chrome Support complet 26Edge Support complet 12Firefox Support complet 16IE Support complet 11Opera Support complet 15Safari Support complet 6.1WebView Android Support complet 4.4Chrome Android Support complet 26Firefox Android Support complet 16Opera Android Support complet 14Safari iOS Support complet 6.1Samsung Internet Android Support complet Oui
border-box
Expérimentale
Chrome Aucun support NonEdge Aucun support NonFirefox Aucun support NonIE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonFirefox Android Aucun support NonOpera Android ? Safari iOS Aucun support NonSamsung Internet Android Aucun support Non
content-box
Expérimentale
Chrome Aucun support NonEdge Aucun support NonFirefox Aucun support NonIE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonFirefox Android Aucun support NonOpera Android ? Safari iOS Aucun support NonSamsung Internet Android Aucun support Non
fill
ExpérimentaleNon-standard
Chrome Support complet 46Edge Aucun support NonFirefox Aucun support NonIE Aucun support NonOpera Support complet 33Safari Support complet 12WebView Android Support complet 46Chrome Android Support complet 46Firefox Android Aucun support NonOpera Android ? Safari iOS Support complet 12Samsung Internet Android Support complet 5.0
fit-contentChrome Support complet 46
Support complet 46
Support complet 22
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Edge Aucun support NonFirefox Support complet 3
Préfixée
Support complet 3
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
IE Aucun support NonOpera Support complet 33
Support complet 33
Support complet 15
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Safari Support complet 11
Support complet 11
Support complet 6.1
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
WebView Android Support complet 46Chrome Android Support complet 46Firefox Android Support complet 4
Préfixée
Support complet 4
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
Opera Android ? Safari iOS Support complet 11
Support complet 11
Support complet 7
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Samsung Internet Android Support complet 5.0
Autre nom
Support complet 5.0
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : -webkit-fill-available
max-contentChrome Support complet 46
Support complet 46
Support complet 22
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Edge Aucun support NonFirefox Support complet 66
Support complet 66
Support complet 3
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
IE Aucun support NonOpera Support complet 44Safari Support complet 11
Support complet 11
Support complet 2
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : intrinsic
WebView Android Support complet 46Chrome Android Support complet 46Firefox Android Support complet 66
Support complet 66
Support complet 4
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
Opera Android Support complet 43Safari iOS Support complet 11
Support complet 11
Support complet 1
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : intrinsic
Samsung Internet Android Support complet 5.0
min-contentChrome Support complet 46
Support complet 46
Support complet 22
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : min-intrinsic
Edge Aucun support NonFirefox Support complet 66
Support complet 66
Support complet 3
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
IE Aucun support NonOpera Support complet 44Safari Support complet 11
Support complet 11
Support complet 2
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : min-intrinsic
WebView Android Support complet 46Chrome Android Support complet 46Firefox Android Support complet 66
Support complet 66
Support complet 4
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
Opera Android Support complet 43Safari iOS Support complet 11
Support complet 11
Support complet 1
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : min-intrinsic
Samsung Internet Android Support complet 5.0
stretch
Expérimentale
Chrome Support complet 22
Autre nom
Support complet 22
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : -webkit-fill-available
Edge Aucun support NonFirefox Support complet 3
Autre nom
Support complet 3
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : -moz-available
IE Aucun support NonOpera Support complet 15
Autre nom
Support complet 15
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : -webkit-fill-available
Safari Support complet 6.1
Préfixée
Support complet 6.1
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
WebView Android Support complet 4.4
Autre nom
Support complet 4.4
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : -webkit-fill-available
Chrome Android Support complet 25
Autre nom
Support complet 25
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : -webkit-fill-available
Firefox Android Support complet 4
Autre nom
Support complet 4
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : -moz-available
Opera Android ? Safari iOS Support complet 6.1
Préfixée
Support complet 6.1
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Samsung Internet Android Support complet 5.0

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
Cette fonctionnalité utilise un nom non-standard.
Cette fonctionnalité utilise un nom non-standard.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.

Voir aussi