1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
|
---
title: width
slug: Web/CSS/width
tags:
- CSS
- CSS Property
- NeedsBrowserCompatibility
- NeedsMobileBrowserCompatibility
- Reference
translation_of: Web/CSS/width
---
<p>{{CSSRef}}</p>
<p>La propietat CSS <strong><code>width</code></strong> especifica l'amplada d'un element. Per defecte, estableix l'amplada de l'<a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#content-area">àrea de contingut</a>. però si {{cssxref("box-sizing")}} està establert a <code>border-box</code>, aquest determina l'amplada de l'<a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#border-area">àrea de vora</a>.</p>
<div>{{EmbedInteractiveExample("pages/css/width.html")}}</div>
<div class="hidden">L'origen d'aquest exemple interactiu s'emmagatzema en un repositori GitHub. Si es vol contribuir al projecte d'exemples interactius, clonar <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> i enviar una sol·licitud d'extracció.</div>
<p>Les propietats {{cssxref("min-width")}} i {{cssxref("max-width")}} anul·la {{cssxref("width")}}.</p>
<h2 id="Sintaxi">Sintaxi</h2>
<pre class="brush:css no-line-numbers notranslate">/* <length> values */
width: 300px;
width: 25em;
/* <percentage> value */
width: 75%;
/* Keyword values */
width: max-content;
width: min-content;
width: fit-content(20em);
width: auto;
/* Global values */
width: inherit;
width: initial;
width: unset;
</pre>
<p>La propietat <code>width</code> s'especifica com a:</p>
<ul>
<li>un dels següents valors de paraules clau:: <code><a href="#min-content">min-content</a></code>, <code><a href="#max-content">max-content</a></code>, <code><a href="#fit-content">fit-content</a></code>, <code><a href="#auto">auto</a></code>.</li>
<li>una <code><a href="#<length>"><length></a></code> o una <code><a href="#<percentage>"><percentage></a></code>.</li>
</ul>
<h3 id="Valors">Valors</h3>
<dl>
<dt>{{cssxref("<length>")}}</dt>
<dd>Defineix l'amplada com un valor absolut.</dd>
<dt>{{cssxref("<percentage>")}}</dt>
<dd>Defineix l'amplada com a percentatge de l'amplada del bloc que conté.</dd>
<dt><code>auto</code></dt>
<dd>El navegador calcularà i seleccionarà una amplada per a l'element especificat.</dd>
<dt><code>max-content</code></dt>
<dd>L'amplada intrínseca preferida.</dd>
<dt><code>min-content</code></dt>
<dd>L'amplada mínima intrínseca.</dd>
<dt><code>fit-content({{cssxref("<length-percentage>")}})</code></dt>
<dd>Utilitza la fórmula fit-content amb l'espai disponible substituït per l'argument especificat, i. e. <code>min(max-content, max(min-content, <length-percentage>))</code>.</dd>
</dl>
<h2 id="Qüestions_daccessibilitat">Qüestions d'accessibilitat</h2>
<p>Ens hem d'assegurar que els elements establerts amb un <code>width</code> no estan truncats i que no enfosqueixin altres continguts quan la pàgina s'ampliï per augmentar la mida del text.</p>
<ul>
<li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li>
<li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html" rel="noopener">Understanding Success Criterion 1.4.4 | Understanding WCAG 2.0</a></li>
</ul>
<h2 id="Definició_formal">Definició formal</h2>
<p>{{CSSInfo}}</p>
<h2 id="Sintaxi_formal">Sintaxi formal</h2>
{{csssyntax}}
<h2 id="Exemples">Exemples</h2>
<h3 id="Amplada_per_defecte">Amplada per defecte</h3>
<pre class="brush:css notranslate">p.goldie {
background: gold;
}</pre>
<pre class="brush:html notranslate"><p class="goldie">The Mozilla community produces a lot of great software.</p></pre>
<p>{{EmbedLiveSample('Default_width', '500px', '64px')}}</p>
<h3 id="Pixels_i_ems">Pixels i ems</h3>
<pre class="brush: css notranslate">.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;
}
</pre>
<pre class="brush: html notranslate"><div class="px_length">Width measured in px</div>
<div class="em_length">Width measured in em</div></pre>
<p>{{EmbedLiveSample('Pixels_and_ems', '500px', '64px')}}</p>
<h3 id="Percentatge">Percentatge</h3>
<pre class="brush: css notranslate">.percent {
width: 20%;
background-color: silver;
border: 1px solid red;
}</pre>
<pre class="brush: html notranslate"><div class="percent">Width in percentage</div></pre>
<p>{{EmbedLiveSample('Percentage', '500px', '64px')}}</p>
<h3 id="max-content">max-content</h3>
<pre class="brush:css; notranslate">p.maxgreen {
background: lightgreen;
width: intrinsic; /* Safari/WebKit uses a non-standard name */
width: -moz-max-content; /* Firefox/Gecko */
width: -webkit-max-content; /* Chrome */
width: max-content;
}</pre>
<pre class="brush:html notranslate"><p class="maxgreen">The Mozilla community produces a lot of great software.</p></pre>
<p>{{EmbedLiveSample('max-content', '500px', '64px')}}</p>
<h3 id="min-content">min-content</h3>
<pre class="brush:css notranslate">p.minblue {
background: lightblue;
width: -moz-min-content; /* Firefox */
width: -webkit-min-content; /* Chrome */
}</pre>
<pre class="brush:html notranslate"><p class="minblue">The Mozilla community produces a lot of great software.</p></pre>
<p>{{EmbedLiveSample('min-content', '500px', '155px')}}</p>
<h2 id="Epecificacions">Epecificacions</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS4 Sizing', '#width-height-keywords', 'width')}}</td>
<td>{{Spec2('CSS4 Sizing')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('CSS3 Sizing', '#width-height-keywords', 'width')}}</td>
<td>{{Spec2('CSS3 Sizing')}}</td>
<td>Added the <code>max-content</code>, <code>min-content</code>, <code>fit-content</code> keywords.</td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'visudet.html#the-width-property', 'width')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>Precises on which element it applies to.</td>
</tr>
<tr>
<td>{{SpecName('CSS1', '#width', 'width')}}</td>
<td>{{Spec2('CSS1')}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<h2 id="Navegadors_compatibles">Navegadors compatibles</h2>
<div class="hidden">La taula de compatibilitat d'aquesta pàgina es genera a partir de dades estructurades. Si es vol contribuir a les dades, consultar <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> i enviar una sol·licitud d'extracció.</div>
<p>{{Compat("css.properties.width")}}</p>
<h2 id="Veure_també">Veure també</h2>
<ul>
<li><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">box model</a></li>
<li>{{cssxref("height")}}</li>
<li>{{cssxref("box-sizing")}}</li>
<li>{{cssxref("min-width")}}, {{cssxref("max-width")}}</li>
<li>Les propietats lògiques assignades: {{cssxref("block-size")}}, {{cssxref("inline-size")}}</li>
</ul>
|
