width

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.

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

Compatibilité des navigateurs

[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

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