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
|
---
title: width
slug: Web/CSS/width
tags:
- CSS
- CSS Eigenschaft
- NeedsBrowserCompatibility
- NeedsMobileBrowserCompatibility
- Referenz
translation_of: Web/CSS/width
---
<div>{{CSSRef}}</div>
<h2 id="Übersicht">Übersicht</h2>
<p>Die <strong><code>width</code></strong> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft legt die Breite des Inhaltsbereichs eines Elements fest. Der <a href="/de/docs/Web/CSS/Boxmodell#Inhaltsbereich">Inhaltsbereich</a> ist <em>innerhalb</em> des Innenabstands, Rahmens und Außenabstands des Elements.</p>
<p>Die {{cssxref("min-width")}} und {{cssxref("max-width")}} Eigenschaften überschreiben <code>width</code>.</p>
<p>{{cssinfo}}</p>
<h2 id="Syntax">Syntax</h2>
<pre class="brush:css">/* <length> Werte */
width: 300px;
width: 25em;
/* <percentage> Werte */
width: 75%;
/* Schlüsselwortwerte */
width: border-box;
width: content-box;
width: max-content;
width: min-content;
width: available;
width: fit-content;
width: auto;
/* Globale Werte */
width: inherit;
width: initial;
width: unset;
</pre>
<h3 id="Werte">Werte</h3>
<dl>
<dt><code><length></code></dt>
<dd>Siehe {{cssxref("<length>")}} für mögliche Einheiten.</dd>
<dt><code><percentage></code></dt>
<dd>Angegeben als {{cssxref("<percentage>")}} der Breite des beinhaltenden Blocks.</dd>
<dt><code>border-box </code>{{experimental_inline}}</dt>
<dd>Falls angegeben, wird der vorherige {{cssxref("<length>")}} oder {{cssxref("<percentage>")}} Wert auf die Borderbox des Elements angewendet.</dd>
<dt><code>content-box</code> {{experimental_inline}}</dt>
<dd>Falls angegeben, wird der vorherige {{cssxref("<length>")}} oder {{cssxref("<percentage>")}} Wert auf die Contentbox des Elements angewendet.</dd>
<dt><code>auto</code></dt>
<dd>Der Browser berechnet die Breite für das angegebene Element.</dd>
<dt><code>max-content</code> {{experimental_inline}}</dt>
<dd>Die innere bevorzugte Breite.</dd>
<dt><code>min-content</code> {{experimental_inline}}</dt>
<dd>Die innere Minimalbreite.</dd>
<dt><code>available</code> {{experimental_inline}}</dt>
<dd>Die Breite des beinhaltenden Blocks minus horizontalem Rand, Außen- und Innenabstand.</dd>
<dt><code>fit-content</code> {{experimental_inline}}</dt>
<dd>Der größere Werte von:
<ul>
<li>der inneren Minimalbreite.</li>
<li>der kleineren Größe der inneren bevorzugten und der verfügbaren Breite.</li>
</ul>
</dd>
</dl>
<h3 id="Formale_Syntax">Formale Syntax</h3>
<pre class="syntaxbox">{{csssyntax}}</pre>
<h2 id="Beispiele">Beispiele</h2>
<h3 id="Standardbreite">Standardbreite</h3>
<pre class="brush:css">p.goldie {
background: gold;
}</pre>
<pre class="brush:html"><p class="goldie">Die Mozilla Community produziert tolle Software.</p></pre>
<p>{{EmbedLiveSample('Standardbreite', '500px', '64px')}}</p>
<h3 id="Pixel_und_ems">Pixel und ems</h3>
<pre class="brush: css">.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"><div class="px_length">Breite gemessen in px</div>
<div class="em_length">Breite gemessen in em</div></pre>
<p>{{EmbedLiveSample('Pixel_und_ems', '500px', '64px')}}</p>
<h3 id="Prozentwert">Prozentwert</h3>
<pre class="brush: css">.percent {
width: 20%;
background-color: silver;
border: 1px solid red;
}</pre>
<pre class="brush: html"><div class="percent">Breite in Prozent</div></pre>
<p>{{EmbedLiveSample('Prozentwert', '500px', '64px')}}</p>
<h3 id="max-content">max-content</h3>
<pre class="brush:css;">p.maxgreen {
background: lightgreen;
width: intrinsic; /* Safari/WebKit verwendet einen nicht standardisierten Namen */
width: -moz-max-content; /* Firefox/Gecko */
width: -webkit-max-content; /* Chrome */
}</pre>
<pre class="brush:html"><p class="maxgreen">Die Mozilla Community produziert tolle Software.</p></pre>
<p>{{EmbedLiveSample('max-content', '500px', '64px')}}</p>
<h3 id="min-content">min-content</h3>
<pre class="brush:css">p.minblue {
background: lightblue;
width: -moz-min-content; /* Firefox */
width: -webkit-min-content; /* Chrome */
}</pre>
<pre class="brush:html"><p class="minblue">Die Mozilla Community produziert tolle Software.</p></pre>
<p>{{EmbedLiveSample('min-content', '500px', '155px')}}</p>
<h2 id="Spezifikationen">Spezifikationen</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spezifikation</th>
<th scope="col">Status</th>
<th scope="col">Kommentar</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Box', '#the-width-and-height-properties', 'width')}}</td>
<td>{{Spec2('CSS3 Box')}}</td>
<td>Fügt die Schlüsselwörter <code>max-content</code>, <code>min-content</code>, <code>available</code>, <code>fit-content</code>, <code>border-box</code> und <code>content-box</code> hinzu.</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Transitions', '#animatable-css', 'width')}}</td>
<td>{{Spec2('CSS3 Transitions')}}</td>
<td>Listet <code>width</code> als animierbar.</td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'visudet.html#the-width-property', 'width')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>Präzisiert die Art von Elementen, auf die die Eigenschaft angewendet werden kann.</td>
</tr>
<tr>
<td>{{SpecName('CSS1', '#width', 'width')}}</td>
<td>{{Spec2('CSS1')}}</td>
<td>Ursprüngliche Definition</td>
</tr>
</tbody>
</table>
<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
<p>{{Compat("css.properties.width")}}</p>
<h2 id="Siehe_auch">Siehe auch</h2>
<ul>
<li><a href="/de/docs/Web/CSS/Boxmodell#Inhaltsbereich">Boxmodell</a>, {{cssxref("height")}}, {{cssxref("box-sizing")}}, {{cssxref("min-width")}} und {{cssxref("max-width")}}</li>
</ul>
|
