width - CSS

Ü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
Berechneter Wert	ein Prozentwert oder `auto` oder die absolute Länge
Animationstyp	Lä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(<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 Basic 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

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