Propriétés min-width, max-width, min-height, max-height

Description des propriétés.

Les quatre propriétés min-width, max-width, min-height et max-height définissent les limites minimales et maximales pour les dimensions d'un élément. En cas de contradiction avec les propriétés width et height, ce sont les propriétés de mini et de maxi qui sont prioritaires.

Ces quatre propriétés sont intéressantes à combiner avec des dimensions exprimées en pourcentages. On obtient ainsi un élément qui s'adapte à la taille de l'écran mais qui reste dans des limites acceptables.

Syntaxes pour les propriétés min et max.

Les exemples de syntaxe ci-dessous sont donnés avec min-width mais les syntaxes sont exactement les mêmes pour max-width, min-height et max-height.

• min-width: none;

  Valeur par défaut. Aucune limite n'est fixée pour les dimensions de l'élément.

• min-width: 400px; a

  Une limite est fixée pour les dimensions de l'élément. a est une valeur positive, du type dimension. Voir les unités de dimensions en CSS.

  S'il s'agit de pourcentages, ils sont calculés par rapport aux dimensions du parent, avec les conventions suivantes:

  1. min-width et max-width sont calculés par rapport à la largeur de l'élément parent.
  2. min-height et max-height sont calculés par rapport à la hauteur de l'élément parent, à condition que celle-ci soit fixée. Dans le cas contraire, les pourcentages sont assimilé à auto.
• min-width: initial;

  La valeur initiale est none.

• min-width: unset; min-width: inherit;

  Reportez-vous à la description générale de ces valeurs.