Le Tutoriel de CSS max-width et min-width

CSS max-width
CSS min-width

1. CSS max-width

CSS max-width est utilisé pour définir la largeur maximale d'un élément. Il empêche la largeur de l'élément de dépasser une valeur spécifiée.

Remarque: CSS width, min-width, max-width ne fonctionnent que pour les éléments Block et Inline-Block.
Le Tutoriel de HTML Block/Inline Elements

L'example avec CSS max-width:

https://ex1.o7planning.com/css/max-width/max-width-example.html

Syntax

/* «length» value */
max-width: 3.5em;

/* «percentage» value */
max-width: 75%;

/* Keyword values */
max-width: none;
max-width: max-content;
max-width: min-content;
max-width: fit-content;
max-width: fill-available;

/* Global values */
max-width: inherit;
max-width: initial;
max-width: unset;

Les valeurs possibles de CSS max-width:

«length»

Spécifiez une valeur spécifique pour la largeur maximale. Par exemple 150px, 30cm,...

«percentage»

La valeur en pourcentage par rapport à la largeur de l'élément parent.

none

La largeur de l'élément n'est pas limitée.

max-content, min-content, fit-content, stretch

Les mots-clés min-content, max-content, fit-content, stretch en CSS

2. CSS min-width

CSS min-width est utilisé pour définir la largeur minimale d'un élément. Il empêche la largeur de l'élément de moins d'une valeur spécifiée.

Remarque: CSS width, min-width, max-width ne fonctionnent que pour les éléments Block et Inline-Block.

Syntax

/* «length» value */
min-width: 3.5em;

/* «percentage» value */
min-width: 75%;

/* Keyword values */
min-width: auto;
min-width: max-content;
min-width: min-content;
min-width: fit-content;
min-width: fill-available;

/* Global values */
min-width: inherit;
min-width: initial;
min-width: unset;

L'example avec CSS min-width:

https://ex1.o7planning.com/css/min-width/min-width-example.html

Les valeurs possibles de CSS min-width:

«length»

Spécifiez une valeur spécifique pour la largeur minimale. L'example 150px, 30cm, ..