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.

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 | 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 Box Model
Die Definition von 'width' in dieser Spezifikation.
Anwärter Empfehlung 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

BCD tables only load in the browser

Siehe auch