Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

Ü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
Animierbarja, als Längenangabe, Prozentsatz oder calc(); wenn beides Längenwerte sind, werden sie als Längenwerte gehandhabt. Wenn beides Prozentsätze sind, werden sie als Prozentsätze gehandhabt. Ansonsten werden beide Werte wie in einer calc() Funktion addiert (Wird ggf. zu Null). Und bei diesen calc() Funktionen wird jede Hälfte als Realzahl interpoliert.
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

Merkmal Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Grundlegende Unterstützung (Ja) 1.0 (1.7 oder früher) 4 3.5 1.0 (85)
Animierbarkeit ? 16.0 (16.0) ? ? ?
max-content 22.0 -webkit
46.0 [1]
3.0 (1.9)-moz ? 15 -webkit 2.0 (421) (intrinsic value)
6.1 -webkit
min-content

22.0 -webkit
46.0 [1]

3.0 (1.9) -moz ? 15 -webkit 6.1 -webkit
available Nicht unterstützt 3.0 (1.9) -moz ? ? ?[1]
fill-available 46.0 [1] Nicht unterstützt ? ? ?
fit-content 22.0 -webkit
46.0 [1]
3.0 (1.9) -moz ? 15 -webkit 6.1 -webkit[2]
border-box and content-box Nicht unterstützt Nicht unterstützt Nicht unterstützt Nicht unterstützt Nicht unterstützt
Merkmal Android Android Webview Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile Chrome für Android
Grundlegende Unterstützung ? (Ja) ? ? ? ? (Ja)
Animierbarkeit ? ? 16.0 (16.0) ? ? ? ?
max-content ? 46.0 [1] ? ? ? ? 46.0 [1]
min-content ? 46.0 [1] ? ? ? ? 46.0 [1]
available ? ? ? ? ? ? ?
fill-available ? 46.0 [1] ? ? ? ? 46.0 [1]
fit-content ? 46.0 [1] ? ? ? ? 46.0 [1]
border-box and content-box ? ? ? ? ? ? ?

[1] WebKit hat eine abweichende Implementierung dieses Wertes unter dem Namen fill-available (Stand Dezember 2013).

[2] Frühere Versionen von WebKit implementierten eine frühere Version dieses Werts unter dem Namen intrinsic, aber seit Version 6.1 wird auch fit-content unterstützt.

[3] Ohne Präfix.

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

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