width

Diese Übersetzung ist unvollständig. Bitte helfen Sie uns, diesen Artikel aus dem Englischen zu übersetzen

Übersicht

Die width CSS Eigenschaft legt die Breite des Inhaltsbereichs eines Elements fest. Der Inhaltsbereich ist innerhalb des Innenabstands, Rahmens und Außenabstands des Elements.

Die min-width und max-width Eigenschaften überschreiben width.

Initialwertauto
Anwendbar aufalle Elemente außer nicht ersetzte Inlineelemente, Tabellenzeilen und Zeilengruppen
VererbtNein
Prozentwertebezieht sich auf die Breite des äußeren Elements
Berechneter Wertein Prozentwert oder auto oder die absolute Länge
AnimationstypLängenangabe, Prozentsatz oder calc();

Syntax

/* <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;

Werte

<length>
Siehe <length> für mögliche Einheiten.
<percentage>
Angegeben als <percentage> der Breite des beinhaltenden Blocks.
border-box
Falls angegeben, wird der vorherige <length> oder <percentage> Wert auf die Borderbox des Elements angewendet.
content-box
Falls angegeben, wird der vorherige <length> oder <percentage> Wert auf die Contentbox des Elements angewendet.
auto
Der Browser berechnet die Breite für das angegebene Element.
max-content
Die innere bevorzugte Breite.
min-content
Die innere Minimalbreite.
available
Die Breite des beinhaltenden Blocks minus horizontalem Rand, Außen- und Innenabstand.
fit-content
Der größere Werte von:
  • der inneren Minimalbreite.
  • der kleineren Größe der inneren bevorzugten und der verfügbaren Breite.

Formale Syntax

auto | <length> | <percentage> | min-content | max-content | fit-content(<length-percentage>)
wobei 
<length-percentage> = <length> | <percentage>

Beispiele

Standardbreite

p.goldie {
  background: gold;
}
<p class="goldie">Die Mozilla Community produziert tolle Software.</p>

Pixel und 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">Breite gemessen in px</div>
<div class="em_length">Breite gemessen in em</div>

Prozentwert

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

max-content

p.maxgreen {
  background: lightgreen;
  width: intrinsic;           /* Safari/WebKit verwendet einen nicht standardisierten Namen */
  width: -moz-max-content;    /* Firefox/Gecko */
  width: -webkit-max-content; /* Chrome */
}
<p class="maxgreen">Die Mozilla Community produziert tolle Software.</p>

min-content

p.minblue {
  background: lightblue;
  width: -moz-min-content;    /* Firefox */
  width: -webkit-min-content; /* Chrome */
}
<p class="minblue">Die Mozilla Community produziert tolle Software.</p>

Spezifikationen

Spezifikation Status Kommentar
CSS Basic Box Model
Die Definition von 'width' in dieser Spezifikation.		 Arbeitsentwurf Fügt die Schlüsselwörter max-content, min-content, available, fit-content, border-box und content-box hinzu.
CSS Transitions
Die Definition von 'width' in dieser Spezifikation.		 Arbeitsentwurf Listet width als animierbar.
CSS Level 2 (Revision 1)
Die Definition von 'width' in dieser Spezifikation.		 Empfehlung Präzisiert die Art von Elementen, auf die die Eigenschaft angewendet werden kann.
CSS Level 1
Die Definition von 'width' in dieser Spezifikation.		 Empfehlung Ursprüngliche Definition

Browser Kompatibilität

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
widthChrome Vollständige Unterstützung 1Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 1IE Vollständige Unterstützung 4Opera Vollständige Unterstützung 3.5Safari Vollständige Unterstützung 1WebView Android Vollständige Unterstützung 1Chrome Android Vollständige Unterstützung 18Firefox Android Vollständige Unterstützung 4Opera Android Vollständige Unterstützung 10.1Safari iOS Vollständige Unterstützung 1Samsung Internet Android Vollständige Unterstützung 1.0
AnimatableChrome Vollständige Unterstützung 26Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 16IE Vollständige Unterstützung 11Opera Vollständige Unterstützung 15Safari Vollständige Unterstützung 6.1WebView Android Vollständige Unterstützung 4.4Chrome Android Vollständige Unterstützung 26Firefox Android Vollständige Unterstützung 16Opera Android Vollständige Unterstützung 14Safari iOS Vollständige Unterstützung 6.1Samsung Internet Android Vollständige Unterstützung 1.5
fill
ExperimentellNicht standardisiert
Chrome Vollständige Unterstützung 46Edge Vollständige Unterstützung 79Firefox Keine Unterstützung NeinIE Keine Unterstützung NeinOpera Vollständige Unterstützung 33Safari Vollständige Unterstützung 12WebView Android Vollständige Unterstützung 46Chrome Android Vollständige Unterstützung 46Firefox Android Keine Unterstützung NeinOpera Android Vollständige Unterstützung 33Safari iOS Vollständige Unterstützung 12Samsung Internet Android Vollständige Unterstützung 5.0
fit-contentChrome Vollständige Unterstützung 46
Vollständige Unterstützung 46
Vollständige Unterstützung 22
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Keine Unterstützung 1 — 48
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: intrinsic
Edge Vollständige Unterstützung 79
Vollständige Unterstützung 79
Vollständige Unterstützung 79
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Firefox Vollständige Unterstützung 3
Mit Präfix
Vollständige Unterstützung 3
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -moz-
IE Keine Unterstützung NeinOpera Vollständige Unterstützung 33
Vollständige Unterstützung 33
Vollständige Unterstützung 15
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Keine Unterstützung 15 — 35
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: intrinsic
Safari Vollständige Unterstützung 11
Vollständige Unterstützung 11
Vollständige Unterstützung 6.1
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Vollständige Unterstützung 2
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: intrinsic
WebView Android Vollständige Unterstützung 46
Vollständige Unterstützung 46
Vollständige Unterstützung ≤37
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Keine Unterstützung 1 — 48
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: intrinsic
Chrome Android Vollständige Unterstützung 46
Vollständige Unterstützung 46
Vollständige Unterstützung 25
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Keine Unterstützung 18 — 48
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: intrinsic
Firefox Android Vollständige Unterstützung 4
Mit Präfix
Vollständige Unterstützung 4
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -moz-
Opera Android Vollständige Unterstützung 33
Vollständige Unterstützung 33
Vollständige Unterstützung 14
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Keine Unterstützung 14 — 35
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: intrinsic
Safari iOS Vollständige Unterstützung 11
Vollständige Unterstützung 11
Vollständige Unterstützung 7
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Vollständige Unterstützung 1
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: intrinsic
Samsung Internet Android Vollständige Unterstützung 5.0
Vollständige Unterstützung 5.0
Vollständige Unterstützung 1.5
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Keine Unterstützung 1.0 — 5.0
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: intrinsic
max-contentChrome Vollständige Unterstützung 46
Vollständige Unterstützung 46
Vollständige Unterstützung 22
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Edge Vollständige Unterstützung 79
Vollständige Unterstützung 79
Vollständige Unterstützung 79
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Firefox Vollständige Unterstützung 66
Vollständige Unterstützung 66
Vollständige Unterstützung 3
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -moz-
IE Keine Unterstützung NeinOpera Vollständige Unterstützung 44Safari Vollständige Unterstützung 11
Vollständige Unterstützung 11
Vollständige Unterstützung 2
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: intrinsic
WebView Android Vollständige Unterstützung 46Chrome Android Vollständige Unterstützung 46Firefox Android Vollständige Unterstützung 66
Vollständige Unterstützung 66
Vollständige Unterstützung 4
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -moz-
Opera Android Vollständige Unterstützung 43Safari iOS Vollständige Unterstützung 11
Vollständige Unterstützung 11
Vollständige Unterstützung 1
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: intrinsic
Samsung Internet Android Vollständige Unterstützung 5.0
min-contentChrome Vollständige Unterstützung 46
Vollständige Unterstützung 46
Keine Unterstützung 1 — 48
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: min-intrinsic
Edge Vollständige Unterstützung 79Firefox Vollständige Unterstützung 66
Vollständige Unterstützung 66
Vollständige Unterstützung 3
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -moz-
IE Keine Unterstützung NeinOpera Vollständige Unterstützung 33
Vollständige Unterstützung 33
Keine Unterstützung 15 — 35
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: min-intrinsic
Safari Vollständige Unterstützung 11
Vollständige Unterstützung 11
Vollständige Unterstützung 2
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: min-intrinsic
WebView Android Vollständige Unterstützung 46
Vollständige Unterstützung 46
Keine Unterstützung 1 — 48
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: min-intrinsic
Chrome Android Vollständige Unterstützung 46
Vollständige Unterstützung 46
Keine Unterstützung 18 — 48
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: min-intrinsic
Firefox Android Vollständige Unterstützung 66
Vollständige Unterstützung 66
Vollständige Unterstützung 4
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -moz-
Opera Android Vollständige Unterstützung 33
Vollständige Unterstützung 33
Keine Unterstützung 14 — 35
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: min-intrinsic
Safari iOS Vollständige Unterstützung 11
Vollständige Unterstützung 11
Vollständige Unterstützung 1
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: min-intrinsic
Samsung Internet Android Vollständige Unterstützung 5.0
Vollständige Unterstützung 5.0
Keine Unterstützung 1.0 — 5.0
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: min-intrinsic
stretch
Experimentell
Chrome Vollständige Unterstützung 22
Alternativer Name
Vollständige Unterstützung 22
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: -webkit-fill-available
Edge Vollständige Unterstützung 79
Alternativer Name
Vollständige Unterstützung 79
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: -webkit-fill-available
Firefox Vollständige Unterstützung 3
Alternativer Name
Vollständige Unterstützung 3
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: -moz-available
IE Keine Unterstützung NeinOpera Vollständige Unterstützung 15
Alternativer Name
Vollständige Unterstützung 15
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: -webkit-fill-available
Safari Vollständige Unterstützung 6.1
Alternativer Name
Vollständige Unterstützung 6.1
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: -webkit-fill-available
WebView Android Vollständige Unterstützung 4.4
Alternativer Name
Vollständige Unterstützung 4.4
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: -webkit-fill-available
Chrome Android Vollständige Unterstützung 25
Alternativer Name
Vollständige Unterstützung 25
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: -webkit-fill-available
Firefox Android Vollständige Unterstützung 4
Alternativer Name
Vollständige Unterstützung 4
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: -moz-available
Opera Android Vollständige Unterstützung 14
Alternativer Name
Vollständige Unterstützung 14
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: -webkit-fill-available
Safari iOS Vollständige Unterstützung 6.1
Alternativer Name
Vollständige Unterstützung 6.1
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: -webkit-fill-available
Samsung Internet Android Vollständige Unterstützung 5.0
Alternativer Name
Vollständige Unterstützung 5.0
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: -webkit-fill-available

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Keine Unterstützung  
Keine Unterstützung
Experimentell. Das Verhalten kann sich zukünftig ändern.
Experimentell. Das Verhalten kann sich zukünftig ändern.
Nicht standardisiert. Erwarte schlechte browserübergreifende Unterstützung.
Nicht standardisiert. Erwarte schlechte browserübergreifende Unterstützung.
Verwendet einen nicht standardisierten Namen.
Verwendet einen nicht standardisierten Namen.
Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.
Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.

Siehe auch