Propriété min-width CSS
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.
Notez que lorsqu'elle est utilisée conjointement avec les propriétés width et max-width, min-width agit comme une borne inférieure. La largeur calculée est bornée entre min-width et max-width, remplaçant la valeur de width si elle se situe en dehors de cette plage.
La propriété accepte une longueur CSS (px, pt, em, etc.) ou un pourcentage.
INFO
Les valeurs de longueur négatives sont interdites.
| Valeur initiale | 0 |
|---|---|
| S'applique à | Tous les éléments, à l'exception des éléments en ligne non remplacés, des lignes de tableau et des groupes de lignes. |
| Héritée | Non. |
| Animable | Oui. La largeur est animable. |
| Version | CSS2 |
| Syntaxe DOM | object.style.minWidth = "200px"; |
Syntaxe
Syntaxe de la propriété CSS min-width
min-width: <length> | <percentage> | initial | inherit;Exemple de la propriété min-width :
Exemple de la propriété CSS min-width avec une valeur en px
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title of the document</title>
<style>
div {
width: 10px;
min-width: 70%;
background-color: #1c87c9;
color: #ffffff
}
</style>
</head>
<body>
<div>The min-width of this text is defined as 70%.</div>
</body>
</html>Résultat
Ici, la largeur minimale de l'élément est de 10 cm :
Exemple de la propriété min-width spécifiée en "cm" :
Exemple de la propriété CSS min-width avec une valeur en cm
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title of the document</title>
<style>
span {
background-color: #ccc;
min-width: 0;
}
.example {
min-width: 10cm;
display: inline-block;
}
</style>
</head>
<body>
<h2>Min-width property example</h2>
<h3>Min-width: 0:</h3>
<span>Minimum width is set to 0.</span>
<h3>min-width: 10cm:</h3>
<span class="example">Minimum width is set to 10cm.</span>
</body>
</html>Valeurs
| Valeur | Description | Essayer » |
|---|---|---|
| length | Définit la largeur minimale en px, pt, cm, etc. La valeur par défaut est 0. | Essayer » |
| % | Définit la largeur minimale en % de l'élément parent. | Essayer » |
| initial | Fait utiliser à la propriété sa valeur par défaut. | Essayer » |
| inherit | Hérite la propriété de son élément parent. |
Pratique
Quelle est la fonctionnalité de la propriété 'min-width' en CSS ?