Propriété CSS max-width

La propriété max-width permet de définir la largeur maximale d'un élément.

Cette propriété empêche la valeur de la propriété width de dépasser la valeur spécifiée pour max-width.

En revanche, la propriété max-width remplace la propriété width, et la propriété CSS min-width remplace la propriété max-width.

Valeur initiale	none
S'applique à	Tous les éléments, à l'exception des éléments en ligne non remplacés, des lignes de tableau et des groupes de lignes.
Héritée	Non.
Animable	Oui. La largeur est animable.
Version	CSS2
Syntaxe DOM	object.style.maxWidth = "500px";

Syntaxe

Syntaxe de la propriété CSS max-width

css

max-width: none | length | initial | inherit;

Exemple de la propriété max-width :

Exemple de la propriété CSS max-width avec une valeur en %

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        max-width: 50%;
        background-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Max-width property example</h2>
    <div>The max-width of this text is defined as 50%.</div>
  </body>
</html>

Try it Yourself »

Résultat

Propriété CSS max-width

Exemple de la propriété max-width définie en "px" et "em" :

Exemple de la propriété CSS max-width avec des valeurs px et em

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        max-width: 250px;
        background-color: #8ebf42;
      }
      p {
        max-width: 20em;
        background-color: #ccc;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <h2>Max-width property example</h2>
    <div>The max-width of this div element is defined as 250px.</div>
    <p>The max-width of this paragraph is defined as 20em.</p>
  </body>
</html>

Try it Yourself »

Valeurs

Valeur	Description	Tester »
auto	Définit la largeur maximale. C'est la valeur par défaut de cette propriété.	Tester »
length	Définit la largeur maximale en px, pt, cm, etc. La valeur par défaut est 0.	Tester »
%	Définit la largeur maximale en % de l'élément parent.	Tester »
initial	Fait utiliser à la propriété sa valeur par défaut.	Tester »
inherit	Hérite la propriété de son élément parent.

Pratique

Que fait la propriété CSS max-width ?

Elle empêche la valeur utilisée de la propriété width de dépasser la valeur spécifiée par max-width.Elle augmente la largeur d'un élément jusqu'à la valeur maximaleElle définit une largeur minimale pour un élémentElle limite la largeur maximale des éléments enfants à l'intérieur d'un conteneur parent.Elle augmente le padding à l'intérieur d'un élément.

Propriété CSS max-width ​

Syntaxe ​

Exemple de la propriété max-width : ​

Résultat ​

Exemple de la propriété max-width définie en "px" et "em" : ​

Valeurs ​

Pratique ​

Propriété CSS max-width

Syntaxe

Exemple de la propriété max-width :

Résultat

Exemple de la propriété max-width définie en "px" et "em" :

Valeurs

Pratique