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.

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

Browser Kompatibilität

Siehe auch

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