min-width

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 valueauto
Applies toall elements but non-replaced inline elements, table rows, and row groups
Inheritedno
Percentagesrefer to the width of the containing block
Computed valuethe percentage as specified or the absolute length
Animation typea 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 This is an experimental API that should not be used in production code.
L'amplada preferida intrínseca.
min-content This is an experimental API that should not be used in production code.
L'amplada mínima intrínseca.
fill-available This is an experimental API that should not be used in production code.
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 This is an experimental API that should not be used in production code.
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

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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 This is an experimental API that should not be used in production code. 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 This is an obsolete API and is no longer guaranteed to work. 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 This is an experimental API that should not be used in production code. ? ? No support ? ? ? ?
auto ? ? ? ? ? ? ?
auto com a valor inicial This is an obsolete API and is no longer guaranteed to work. ? ? ? ? ? ? ?

[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é