max-width
La propriété max-width
est utilisée pour définir la largeur maximale d'un élément donné. Elle empêche la valeur de la propriété width
de devenir supérieure à la valeur spécifiée par max-width
(autrement dit, max-width
est une borne supérieur pour width
).
Exemple interactif
Syntaxe
/* Valeur de longueur */
/* Type <length> */
max-width: 3.5em;
/* Valeurs relatives */
/* Type <percentage> */
max-width: 10%;
/* Valeurs avec un mot-clé */
max-width: none;
max-width: max-content;
max-width: min-content;
max-width: fit-content;
max-width: fill-available;
/* Valeurs globales */
max-width: inherit;
max-width: initial;
max-width: unset;
Valeurs
<length>
-
La largeur minimale fixée. Voir
<length>
pour les unités qu'on peut utiliser. Une largeur négative rendra la déclaration invalide. <percentage>
-
La largeur minimale fixée, exprimée comme un fraction de la largeur du bloc englobant. Voir la page
<percentage>
sur les valeurs possibles avec ce type. Les valeurs négatives rendront la déclaration invalide. fill-available
Expérimental-
La largeur du bloc englobant moins la marge horizontale, la bordure et le remplissage (padding). Certains navigateurs implémentent cette valeur avec un ancien nom :
available
. fit-content
Expérimental-
Un synonyme pour
max-content
. max-content
Expérimental-
La largeur intrinsèque préférée.
min-content
Expérimental-
La largeur intrinsèque minimale.
none
-
Il n'y a pas de maximum pour la largeur. C'est la valeur par défaut.
Définition formelle
Valeur initiale | none |
---|---|
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 | le pourcentage comme spécifié ou la longueur absolue ou le mot-clé none |
Type d'animation | une longueur, pourcentage ou calc() ; |
Syntaxe formelle
max-width =
none |
<length-percentage [0,∞]> |
min-content |
max-content |
fit-content( <length-percentage [0,∞]> )
<length-percentage> =
<length> |
<percentage>
Exemples
Exemple simple avec un tableau
HTML
<div> Lorem ipsum tralala sit amet, consectetur adipisicing
<p>
Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
CSS
div {
width: 250px;
border: solid 1px red;
}
p {
max-width: 60%;
border: solid 1px blue;
}
Résultat
Accessibilité
Veiller à s'assurer que les éléments ciblés avec une règle utilisant max-width
ne sont pas tronqués ou ne masquent pas d'autre contenu sur la page lorsqu'on zoome pour augmenter la taille du texte.
Spécifications
Specification |
---|
CSS Box Sizing Module Level 4 # width-height-keywords |
Compatibilité des navigateurs
BCD tables only load in the browser