Attribut MIN-WIDTH

Rôle

L’attribut min-width permet de spécifier la largeur minimum d’une boite

Version : CSS2

Héritage (inherit) : non

Propriété Javascript : element.style.minWidth

Testez vous-même cet attribut

Utilisez Codepen.

– Le code CSS

section{
  height: 55px;
  background-color: rgb(220,220,220);
}
div{
  width: 30%;
  height: 50%;
  background-color: pink;
}
div.minWidth{
  min-width: 600px;
  height: 50%;
  background-color: orange;
}

– Le code HTML

<section>
  <div>Texte</div>
  <div class="minWidth">min-width:600px </div>
</section>

Résultat

Les boites orange et rose ont une largeur fixée à 30% pourcentage de la largeur du conteneur gris. Mais la boite orange à une largeur minimum de 600px

Compatibilité

L’attribut min-width est pris en charge par tous les principaux navigateurs
A partir d’ Internet Explorer 7

Valeurs

Les différentes valeurs de l’attribut min-width sont:

length

Définit une valeur en px, pt, cm, em.
Syntaxe :
min-width : 20px

pourcentage

Définit une valeur en pourcentage par rapport à l’élément parent.
Syntaxe :
min-width : 30%

initial

Défini à sa valeur initiale (attention pas pris en charge par Internet Explorer et Opéra en dessous de la version 15). Peut être utilisé pour « neutraliser » une spécificité.
Syntaxe :
min-width : initial

inherit

Hérite de la même propriété que l’élément parent.
Syntaxe :
min-width : inherit

A voir aussi

border box-sizing clip height width margin padding overflow max-width min-width outline resize