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

BCD tables only load in the browser

Siehe auch