Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
width
Baseline
Widely available
*
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.
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
width: 150px;
width: 20em;
width: 75%;
width: auto;
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
This is a box where you can change the width.
</div>
</section>
#example-element {
display: flex;
flex-direction: column;
background-color: #5b6dcd;
height: 80%;
justify-content: center;
color: #ffffff;
}
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
- 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-boxoucontent-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-boxExpé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-boxExpé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.
fillExpérimental-
Utilise la taille
fill-availabledans l'axe du sens de lecture ou la taillefill-availabledans l'axe perpendiculaire au sens de lecture selon le mode d'écriture. max-contentExpérimental-
La largeur intrinsèque préférée.
min-contentExpérimental-
La largeur intrinsèque minimum.
availableExpérimental-
La largeur du bloc contenant le bloc courant, moins la marge horizontale, la bordure et le remplissage (padding).
fit-contentExpé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,∞]> ) |
<calc-size()> |
<anchor-size()> |
stretch |
fit-content |
contain
<length-percentage> =
<length> |
<percentage>
<calc-size()> =
calc-size( <calc-size-basis> , <calc-sum> )
<anchor-size()> =
anchor-size( [ <anchor-name> || <anchor-size> ] ? , <length-percentage>? )
<calc-size-basis> =
<size-keyword> |
<calc-size()> |
any |
<calc-sum>
<calc-sum> =
<calc-product> [ [ '+' | '-' ] <calc-product> ] *
<anchor-name> =
<dashed-ident>
<anchor-size> =
width |
height |
block |
inline |
self-block |
self-inline
<calc-product> =
<calc-value> [ [ '*' | / ] <calc-value> ] *
<calc-value> =
<number> |
<dimension> |
<percentage> |
<calc-keyword> |
( <calc-sum> )
<calc-keyword> =
e |
pi |
infinity |
-infinity |
NaN
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
| Specification |
|---|
| CSS Box Sizing Module Level 4 # sizing-values |
Compatibilité des navigateurs
Chargement...