min-width
La propriété min-width
est utilisée pour définir la largeur minimale d'un élément donné. Elle empêche la valeur de la propriété width
de devenir inférieure à la valeur spécifiée par min-width
(autrement dit, min-width
est une borne inférieure pour width
).
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !
La valeur de min-width
surcharge les valeurs de max-width
et de width
si elle est supérieure à l'une de ces propriétés.
Syntaxe
/* Valeur de longueur */
/* Type <length> */
min-width: 3.5em;
/* Valeurs relatives */
/* Type <percentage> */
min-width: 10%;
/* Valeurs avec un mot-clé */
min-width: max-content;
min-width: min-content;
min-width: fit-content;
min-width: fill-available;
/* Valeurs globales */
min-width: inherit;
min-width: initial;
min-width: unset;
Valeurs
<length>
- La largeur minimale. Voir
<length>
pour les unités qu'on peut utiliser. Une largeur négative rendra la déclaration invalide. <percentage>
- La largeur minimale, exprimée comme un fraction de la largeur du bloc englobant. Voir la page
<percentage>
sur les valeurs possibles avec ce type. Les valeurs négatives rendront la déclaration invalide. auto
- Définit une taille automatique minimale. Sauf si elle est définie par la disposition courante, la résolution de cette valeur sera 0. A des fins de rétro-compatibilité, la valeur résolue de ce mot-clé sera 0 pour l'ensemble des disposition CSS2 : bloc, en ligne, bloc-en ligne, disposition en tableau..
max-content
- La largeur intrinsèque préférée.
min-content
- La largeur intrinsèque minimale.
fill-available
- La largeur du bloc englobant moins la marge horizontale, la bordure et le remplissage (padding). Certains navigateurs implémentent cette valeur avec un ancien nom :
available
. fit-content
- La largeur calculée par
min(max-content, max(min-content, fill-available))
.
Syntaxe formelle
auto | <length> | <percentage> | min-content | max-content | fit-content | fit-content(<length-percentage>)où
<length-percentage> = <length> | <percentage>
Exemples
HTML
<div> Lorem ipsum tralala sit amet, consectetur adipisicing
<p>
Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
CSS
div {
width: 250px;
border: solid 1px red;
}
p {
max-width: 60%;
border: solid 1px blue;
}
Résultat
Spécifications
Spécification | État | Commentaires |
---|---|---|
CSS Box Sizing Module Level 3 La définition de 'min-width' dans cette spécification. |
Version de travail | Ajout des mots-clés max-content , min-content , fit-content et fill-available . |
CSS Flexible Box Layout Module La définition de 'min-width' dans cette spécification. |
Candidat au statut de recommandation | Ajout du mot-clé auto qui est utilisé comme valeur initiale. |
CSS Transitions La définition de 'min-width' dans cette spécification. |
Version de travail | min-width peut désormais être animée. |
CSS Level 2 (Revision 1) La définition de 'min-width' dans cette spécification. |
Recommendation | Définition initiale. |
Valeur initiale | auto |
---|---|
Applicabilité | tous les éléments sauf les éléments en ligne non remplacés, les lignes de tableaux et les groupes de lignes |
Héritée | non |
Pourcentages | se rapporte à la largeur du bloc contenant |
Valeur calculée | le pourcentage tel que spécifé ou une longeur absolue |
Type d'animation | une longueur, pourcentage ou calc() ; |
Compatibilité des navigateurs
BCD tables only load in the browser
Pour contribuer à ces données de compatibilité, vous pouvez envoyer une pull request sur ce dépôt: https://github.com/mdn/browser-compat-data.