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

La propietat width especifica l'amplada d'un element. Per defecte, la propietat defineix l'amplada de l'àrea de contingut. Si box-sizing està establert a border-box, aquest determina l'amplada de l'àrea de vora.

/* <length> values */
width: 300px;
width: 25em;

/* <percentage> value */
width: 75%;

/* Keyword values */
width: 25em border-box;
width: 75% content-box;
width: max-content;
width: min-content;
width: available;
width: fit-content;
width: auto;

/* Global values */
width: inherit;
width: initial;
width: unset;

Les propietats min-width i max-width anul·la 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
Mediavisual
Computed valuea percentage or auto or the absolute length
Animation typea length, percentage or calc();
Canonical orderthe length or percentage before the keyword, if both are present

Sintaxi

La propietat width s'especifica com:

Valors

<length>
Defineix l'amplada com un valor absolut.
<percentage>
Defineix l'amplada com a percentatge de l'amplada del bloc contenidor. Si l'amplada del bloc contenidor depèn de l'amplada de l'element, el disseny resultant no està definit.
border-box
Si està present, s'aplica abans <length> o <percentage> a la caixa de vora de l'element.
content-box
Si està present, s'aplica abans <length> o <percentage> a la caixa de contingut de l'element.
auto
El navegador calcularà i seleccionarà una amplada per a l'element especificat.
fill
Utilitzeu la grandària fill-available en línia o la grandària fill-available del bloc, segons correspongui a la modalitat d'escriptura.
max-content
L'amplada intrínseca preferida.
min-content
L'amplada mínima intrínseca.
available
L'amplada del bloc contenidor menys el marge horitzontal, la vora i el farcit.
fit-content
El més gran de:
  • l'amplada mínima intrínseca.
  • la menor de l'amplada intrínseca preferida i l'amplada disponible.

Sintaxi formal

[ <length> | <percentage> ] && [ border-box | content-box ]? | available | min-content | max-content | fit-content | auto

Exemples

width predeterminat

p.goldie {
  background: gold;
}
<p class="goldie">The Mozilla community produces a lot of great software.</p>

Pixels i ems

.px_length {
  width: 200px;
  background-color: red;
  color: white;
  border: 1px solid black;
}

.em_length {
  width: 20em;
  background-color: white;
  color: red;
  border: 1px solid black;
}
<div class="px_length">Width measured in px</div>
<div class="em_length">Width measured in em</div>

Percentatge

.percent {
  width: 20%;
  background-color: silver;
  border: 1px solid red;
}
<div class="percent">Width in percentage</div>

max-content

p.maxgreen {
  background: lightgreen;
  width: intrinsic;           /* Safari/WebKit uses a non-standard name */
  width: -moz-max-content;    /* Firefox/Gecko */
  width: -webkit-max-content; /* Chrome */
}
<p class="maxgreen">The Mozilla community produces a lot of great software.</p>

min-content

p.minblue {
  background: lightblue;
  width: -moz-min-content;    /* Firefox */
  width: -webkit-min-content; /* Chrome */
}
<p class="minblue">The Mozilla community produces a lot of great software.</p>

Epecificacions

Especificació Estat Comentari
CSS Basic Box Model
The definition of 'width' in that specification.
Working Draft Afegeix les paraules claus max-content, min-content, available, fit-content, border-box, content-box.
CSS Transitions
The definition of 'width' in that specification.
Working Draft Mostra width com animable.
CSS Level 2 (Revision 1)
The definition of 'width' in that specification.
Recommendation Precisa en quin element s'aplica.
CSS Level 1
The definition of 'width' in that specification.
Recommendation Definició inicial.
CSS Intrinsic & Extrinsic Sizing Module Level 3
The definition of 'width' in that specification.
Working Draft Afegeix noves paraules clau de grandària per a l'amplada i l'alçada.

                          
Descripció Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Suport bàsic (Yes) (Yes) 1.0 (1.7 or earlier) 4 3.5 1.0 (85)
Animabilitat ? ? 16.0 (16.0) ? ? ?
max-content 22.0 -webkit
46.0 [1]
No support 3.0 (1.9)-moz ? 15 -webkit 2.0 (421) (intrinsic value)
6.1 -webkit
min-content

22.0 [4] -webkit
46.0 [1]

No support 3.0 (1.9) -moz ? 15 -webkit 2.0 (421) (min-intrinsic value)
6.1 -webkit
available No support No support 3.0 (1.9) -moz ? ? ?[1]
fill-available 22.0 -webkit No support No support ? ? 6.1 -webkit
fit-content 22.0 [4] -webkit
46.0 [1]
No support 3.0 (1.9) -moz ? 15 -webkit 6.1 -webkit[2]
border-box and content-box No support No support No support No support No support No support
fill 46.0 No support        
                          
Descripció Android Android Webview Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
Suport bàsic ? (Yes) (Yes) ? ? ? ? (Yes)
Animabilitat ? ? ? 16.0 (16.0) ? ? ? ?
max-content No support 46.0 [1] No support ? ? ? ? 46.0 [1]
min-content No support 46.0 [1] No support ? ? ? ? 46.0 [1]
available ? ? No support ? ? ? ? ?
fill-available No support 46.0 [1] No support ? ? ? ? 46.0 [1]
fit-content No support 46.0 [1] No support ? ? ? ? 46.0 [1]
border-box and content-box ? ? No support ? ? ? ? ?
fill No support 46.0 No support ?       46.0

[1] WebKit implementa una variació d'aquest valor sota el nom fill-available a partir de Desembre de 2013.

[2] Les versions anteriors de WebKit van implementar una versió anterior d'aquest valor sota el nom intrinsic, però també implementa fit-content des de la versió 6.1.

[3] Sense prefixat.

[4] L'antic WebKit és compatible amb paraules clau intrinsic i min-intrinsic, però eliminades en Chrome 48.

Vegeu també

Document Tags and Contributors

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