Propriété CSS min-width

❮ Précédent Suivant ❯

La propriété min-width définit la largeur minimale d'un élément. Cette propriété empêche la valeur de la propriété width de devenir inférieure à la valeur spécifiée pour min-width.

Pendant ce temps, la propriété min-width passe outre aux propriétés width et max-width.

La propriété prend une longueur CSS (px, pt, em, etc.) ou un pourcentage.

Valeurs négatives de longueur sont illégales.

Valeur initiale	none
Appliquée à	Tous les éléments sauf les éléments en ligne non remplacés, les colonnes de tableaux et les groupes de colonnes.
Héritée	Non.
Animable	Oui. La largeur est animable.
Version	CSS2
Syntaxe DOM	object.style.minWidth = "200px";

Syntaxe

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

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      div {
      width:10px;
      min-width:70%;
      background-color: #1c87c9;
      color: #fff
      }
    </style>
  </head>
  <body>
    <div>La largeur minimale de ce texte est définie à 70%.</div>
  </body>
</html>

Essayez-vous-même!

Ici la largeur minimale de l'élément est 10cm:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      span {
      background-color: #ccc;
      min-width: none;
      }
      .example {
      min-width: 10cm;
      display: inline-block;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété min-width</h2>
    <h3>Min-width: none:</h3>
    <span>La largeur minimale définie à none.</span>
    <h3>min-width: 10cm:</h3>
    <span class="example">La largeur minimale définie à 10cm.</span>
  </body>
</html>

Essayez-vous-même!

Valeurs

Valeur	Description
auto	Définit la largeur minimale. C'est la largeur initiale de cette propriété.
length	Définit la largeur minimale en px, pt, cm, etc. Valeur initiale est 0.
%	Définit la largeur minimale en % de l'élément contenu.
initial	Fait utiliser la valeur initiale.
inherit	Hérite la propriété de son élément parent.