La propietat CSS min-width estableix l'amplada mínima d'un element. Impedeix que el valor utilitzat per la propietat width sigui més ampla que el valor especificat per min-width.
/* <length> value */ min-width: 3.5em; /* <percentage> value */ min-width: 10%; /* Keyword values */ 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'amplada de l'element s'ajusta al valor de min-width cada vegada que min-width és més gran que max-width o width.
| Initial value | auto |
|---|---|
| Applies to | all elements but non-replaced inline elements, table rows, and row groups |
| Inherited | no |
| Percentages | refer to the width of the containing block |
| Media | visual |
| Computed value | the percentage as specified or the absolute length |
| Animation type | a length, percentage or calc(); |
| Canonical order | the unique non-ambiguous order defined by the formal grammar |
Sintaxi
Valors
<length>- L'amplada mínima, expressada com
<length>. Els valors negatius fan que la declaració no sigui vàlida . <percentage>- L'amplada mínima, expressada com
<percentage>de l'amplada del bloc contenidor. Els valors negatius fan que la declaració no sigui vàlida .
Valors de paraules clau
auto- L'amplada mínima predeterminada per a elements flexibles, proporcionant un valor predeterminat més raonable que 0 per a altres dissenys .
max-content- L'amplada preferida intrínseca.
min-content- L'amplada mínima intrínseca.
fill-available- L'amplada del bloc contenidor menys el marge horitzontal, la vora i el farcit. ( Tingueu en compte que alguns navegadors implementen un nom antic per a aquesta paraula clau,
available). fit-content- Definit com
min(max-content, max(min-content, fill-available)).
Sintaxi formal
<length> | <percentage> | auto | max-content | min-content | fit-content | fill-available
Exemples
table { min-width: 75%; }
form { min-width: 0; }
Especificacions
| Especificació | Estat | Comentari |
|---|---|---|
| CSS Intrinsic & Extrinsic Sizing Module Level 3 The definition of 'min-width' in that specification. |
Working Draft | Afegeix les paraules clau max-content, min-content, fit-content, and fill-available keywords. (Els esborranys CSS3 Box i CSS3 Writing Modes s'utilitzen per definir aquestes paraules clau, però són substituïdes per aquesta especificació) |
| CSS Flexible Box Layout Module The definition of 'min-width' in that specification. |
Candidate Recommendation | Afegeix la paraula clau auto keyword i l'utilitza com a valor inicial. |
| CSS Transitions The definition of 'min-width' in that specification. |
Working Draft | Defineix min-width com animable. |
| CSS Level 2 (Revision 1) The definition of 'min-width' in that specification. |
Recommendation | Definició inicial. |
Navegadors compatibles
| Descripció | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|---|
| Suport bàsic | 1.0 | (Yes) | 1.0 (1.0) | 7.0 | 4.0 | 2.0.2 (416), buggy before |
s'aplica a <table> [1] |
No support | No support | (Yes) | No support | (Yes) | No support |
max-content, min-content, fit-content i fill-available |
24.0 -webkit [3] | No support | 3.0 (1.9) -moz [2] | No support | No support | No support [3] |
auto |
21.0 [4] | ? | 16.0 (16.0) [4] Removed in 22.0 (22.0) Reintroduced in 34.0 (34.0) with the new behavior defined by the spec. |
No support | 12.10 [6] | No support |
auto com a valor inicial |
21.0 | (Yes) | 18.0 (18.0) Removed in 22.0 (22.0) |
No support | 12.10 | No support |
| Descripció | Android | Chrome for Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|---|
| Suport bàsic | ? | ? | (Yes) | ? | ? | ? | ?[5] |
s'aplica a <table>[1] |
? | ? | No support | ? | ? | ? | ? |
max-content, min-content, fit-content i fill-available |
? | ? | No support | ? | ? | ? | ? |
auto |
? | ? | ? | ? | ? | ? | ? |
auto com a valor inicial |
? | ? | ? | ? | ? | ? | ? |
[1] CSS 2.1 deixa explícitament indefinit el comportament de min-width amb <table>. Per tant, qualsevol comportament és compatible amb CSS2.1; les noves especificacions de CSS poden definir aquest comportament, de manera que els desenvolupadors web no haurien de confiar en un específic ara.
[2] Gecko implementa experimentalment les definicions donades en CSS3 Basic Box. Aquesta defineix available i no fill-available. També la definició de fit-content és més simple que en CSS3 Sizing.
[3] WebKit també implementa una proposta anterior, la paraula clau intrinsic.
[4] Aquestes implementacions on s'implementa un comportament lleugerament més simple per a aquesta paraula clau: calcula min-content en elements flexibles, i computa a 0 en tota la resta.
[5] En alguns navegadors, a iOS, un element <button> en la seva configuració nativa (predeterminada) no respondrà a min-width. Aquest problema es deu als botons natius. Un <span> dins d'un botó natiu mostrarà el mateix problema, malgrat tenir definit "display:inline-block". Quan es fan canvis en altres paràmetres d'estil i el navegador es veu obligat a abandonar el botó natiu, la configuració min-width es veu afectada.