This translation is incomplete. Please help translate this article from English.

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 value0
Applies toall elements but non-replaced inline elements, table rows, and row groups
Inheritedno
Percentagesrefer to the width of the containing block
Mediavisual
Computed valuethe percentage as specified or the absolute length
Animation typea length, percentage or calc();
Canonical orderthe 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.

Vegeu també

Document Tags and Contributors

 Contributors to this page: Legioinvicta
 Last updated by: Legioinvicta,