width

Ü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.

Initialwert	`auto`
Anwendbar auf	alle Elemente außer nicht ersetzte Inlineelemente, Tabellenzeilen und Zeilengruppen
Vererbt	Nein
Prozentwerte	bezieht sich auf die Breite des äußeren Elements
Medien	visuell
Berechneter Wert	ein Prozentwert oder `auto` oder die absolute Länge
Animierbar	ja, 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 Reihenfolge	die 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

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

Boxmodell, height, box-sizing, min-width und max-width