max-width

Définit une largeur maximale, au-delà de laquelle l’élément ne s’étire pas.

Valeur initiale: none
Héritée: Non
Animable: oui, en tant que longueur ou pourcentage
S’applique à: tous les éléments sauf les éléments en ligne non remplacés (par exemple `<span>`), les lignes de tableau et les groupes de lignes
JavaScript: element.style.maxWidth = "65ch"

Sur cette page

Exemple
Définition et utilisation
Syntaxe
Valeurs
Valeurs en pratique
Compatibilité des navigateurs
Bonnes pratiques
Entrées associées

Exemple

CSS

.container {
  max-width: 480px;
  margin-inline: auto;
}

img {
  max-width: 100%;
  height: auto;
}

Aperçu

Définition et utilisation

La propriété max-width plafonne la largeur. L’élément peut être plus étroit s’il manque de place, mais il ne dépassera jamais la valeur indiquée. C’est l’une des propriétés les plus importantes du design responsive.

Les usages classiques sont le conteneur de page (max-width: 1200px; margin: 0 auto;), une longueur de ligne confortable pour le texte (max-width: 65ch) et les images qui ne doivent pas déborder de leur parent (max-width: 100%).

Si max-width est inférieure à width, c’est max-width qui l’emporte. Et en cas de conflit avec min-width, c’est min-width qui gagne.

Syntaxe

max-width: none | <longueur> | <pourcentage> | min-content | max-content | fit-content;

Valeurs

none
Aucune limite. Le texte occupe toute la largeur.
260px
<longueur>
Le paragraphe ne dépassera pas 260px de large.
30ch
<longueur>
Environ 30 caractères par ligne. L’unité ch correspond à la largeur du chiffre 0.
60%
<pourcentage>
Au maximum 60% de la largeur du parent.

Valeur	Type	Description
none		Aucune limite. Le texte occupe toute la largeur.
260px	<longueur>	Le paragraphe ne dépassera pas 260px de large.
30ch	<longueur>	Environ 30 caractères par ligne. L’unité `ch` correspond à la largeur du chiffre 0.
60%	<pourcentage>	Au maximum 60% de la largeur du parent.

Valeurs en pratique

none

Aucune limite. Le texte occupe toute la largeur.

.demo { max-width: none; }

260px

Le paragraphe ne dépassera pas 260px de large.

.demo { max-width: 260px; }

30ch

Environ 30 caractères par ligne. L’unité ch correspond à la largeur du chiffre 0.

.demo { max-width: 30ch; }

60%

Au maximum 60% de la largeur du parent.

.demo { max-width: 60%; }

Compatibilité des navigateurs

Largement disponible

Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.

Chrome
Edge
Firefox
Safari

Bonnes pratiques

Ajoutez img { max-width: 100%; height: auto; } à chaque projet. Les images ne déborderont plus de l’écran d’un téléphone.
Pour le texte, visez 60 à 75 caractères par ligne, par exemple avec max-width: 65ch.

Entrées associées

Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.

Leçons gratuitesPratiquez CSS dans le cours HTML et CSSDes exercices avec indices, un éditeur de code et une progression enregistrée au fur et à mesure.Voir le cours