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 |
Computed value | the percentage as specified or the absolute length |
Animation type | a length, percentage or calc(); |
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
auto | <length> | <percentage> | min-content | max-content | fit-content(<length-percentage>)where
<length-percentage> = <length> | <percentage>
Exemples
table { min-width: 75%; }
form { min-width: 0; }
Especificacions
Especificació | Estat | Comentari |
---|---|---|
CSS Box 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.