Diese Übersetzung ist unvollständig. Bitte helfen Sie, 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
Medienvisuell
Berechneter Wertein Prozentwert oder auto oder die absolute Länge
AnimationstypLängenangabe, Prozentsatz oder calc();
Kanonische Reihenfolgedie Länge oder der Prozentwert vor dem Schlüsselwort, falls beide vorhanden sind

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

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

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
Animatable
Experimentell
Chrome 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 Ja
border-box
Experimentell
Chrome Keine Unterstützung NeinEdge Keine Unterstützung NeinFirefox Keine Unterstützung NeinIE Keine Unterstützung NeinOpera Keine Unterstützung NeinSafari Keine Unterstützung NeinWebView Android Keine Unterstützung NeinChrome Android Keine Unterstützung NeinFirefox Android Keine Unterstützung NeinOpera Android ? Safari iOS Keine Unterstützung NeinSamsung Internet Android Keine Unterstützung Nein
content-box
Experimentell
Chrome Keine Unterstützung NeinEdge Keine Unterstützung NeinFirefox Keine Unterstützung NeinIE Keine Unterstützung NeinOpera Keine Unterstützung NeinSafari Keine Unterstützung NeinWebView Android Keine Unterstützung NeinChrome Android Keine Unterstützung NeinFirefox Android Keine Unterstützung NeinOpera Android ? Safari iOS Keine Unterstützung NeinSamsung Internet Android Keine Unterstützung Nein
fill
ExperimentellNicht standardisiert
Chrome Vollständige Unterstützung 46Edge Keine Unterstützung NeinFirefox 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 ? Safari 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-
Edge Keine Unterstützung NeinFirefox 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 15
Mit Präfix
Vollständige Unterstützung 15
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
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-
WebView Android Vollständige Unterstützung 46Chrome Android Vollständige Unterstützung 46Firefox 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 ? 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-
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
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 Keine Unterstützung NeinFirefox 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
Vollständige Unterstützung 22
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: min-intrinsic
Edge Keine Unterstützung NeinFirefox 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: min-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: min-intrinsic
Samsung Internet Android Vollständige Unterstützung 5.0
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 Keine Unterstützung NeinFirefox 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
Mit Präfix
Vollständige Unterstützung 6.1
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
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 ? Safari iOS Vollständige Unterstützung 6.1
Mit Präfix
Vollständige Unterstützung 6.1
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Samsung Internet Android Vollständige Unterstützung 5.0

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Keine Unterstützung  
Keine Unterstützung
Kompatibilität unbekannt  
Kompatibilität unbekannt
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

Schlagwörter des Dokuments und Mitwirkende

Zuletzt aktualisiert von: PPElite,