Ü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 AndroidEdge MobileFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
Grundlegende UnterstützungChrome Vollständige Unterstützung JaEdge 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 JaChrome Android Vollständige Unterstützung JaEdge Mobile Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung 4Opera Android Vollständige Unterstützung JaSafari iOS Vollständige Unterstützung JaSamsung Internet Android Vollständige Unterstützung Ja
Animatable
Experimentell
Chrome ? Edge ? Firefox Vollständige Unterstützung 16IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Vollständige Unterstützung 16Opera Android ? Safari iOS ? Samsung Internet Android ?
max-content
Experimentell
Chrome 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 ? Opera 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 6.1
Mit Präfix
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 46Chrome Android Vollständige Unterstützung 46Edge Mobile Keine Unterstützung NeinFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android Vollständige Unterstützung 5.0
min-content
Experimentell
Chrome 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 3
Mit Präfix
Vollständige Unterstützung 3
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -moz-
IE ? Opera 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 6.1
Mit Präfix
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: min-intrinsic
WebView Android Vollständige Unterstützung 46Chrome Android Vollständige Unterstützung 46Edge Mobile Keine Unterstützung NeinFirefox Android ? Opera Android ? Safari iOS ? 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 ? Opera ? 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 37
Alternativer Name
Vollständige Unterstützung 37
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
Edge Mobile Keine Unterstützung NeinFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android Vollständige Unterstützung 5.0
fit-content
Experimentell
Chrome 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 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 46Chrome Android Vollständige Unterstützung 46Edge Mobile Keine Unterstützung NeinFirefox Android ? Opera Android ? Safari iOS ? 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
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 ? Chrome Android ? Edge Mobile Keine Unterstützung NeinFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android Keine Unterstützung Nein
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 ? Chrome Android ? Edge Mobile Keine Unterstützung NeinFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android Keine Unterstützung Nein
fill
ExperimentellNicht standardisiert
Chrome Vollständige Unterstützung 46Edge Keine Unterstützung NeinFirefox ? IE ? Opera ? Safari ? WebView Android Vollständige Unterstützung 46Chrome Android Vollständige Unterstützung 46Edge Mobile Keine Unterstützung NeinFirefox Android ? Opera Android ? Safari iOS ? 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

Mitwirkende an dieser Seite: SJW, Simplexible, Prinz_Rana, Sebastianz, fscholz, Jürgen Jeka, Michael2402
Zuletzt aktualisiert von: SJW,