width

Übersicht

Die width Eigenschaft legt die Breite des Inhaltsbereichs (content area) eines Elements fest.
Der Inhaltsbereich befindet sich innerhalb des Rahmenbereiches sowie innerhalb der Innenabstands- und Außenabstandsbereichen, sodass das Element insgesamt (mit border, padding und margin ) mehr Platz benötigen könnte bzw. größer sein kann.

  • Standardwert: auto
  • Anwendbar auf: Blockelemente und ersetzte Elemente (replaced Elements)
  • Vererbbar: Nein
  • Prozentwerte: Beziehen sich auf die Breite des umschließenden Blockelements (containing block)
  • Medium: visuell
  • berechneter Wert: Prozentzahl, auto wie angegeben oder die absolute Längenangabe; auto wenn width nicht festgelegt wird

Syntax

width: auto | <Längenangabe> | <Prozentzahl> | inherit | -moz-max-content | -moz-min-content | -moz-fit-content | -moz-available

Werte

auto
Standardwert. Die Breite wird automatisch berechnet.
<Längenangabe>
Eine absolute Längenangabe für Breite des Elements.
<Prozentzahl>
Eine prozentuale Angabe, die sich auf die Breite des umschließenden Blocks bezieht.
inherit
Der Wert des Elternelements wird geerbt.

Mozilla Erweiterungen

-moz-max-content
Die eigentliche, bevorzugte Breite
-moz-min-content
Die eigentliche, kleinste Breite
-moz-available
Die Breite des umschließenden Blocks minus dem horizontalen Außenabstand (margin), dem Rahmen (border) und dem Innenabstand (padding).
-moz-fit-content
Die Breite passt sich dem Inhalt an.

Beispiele

Live Beispiel

p { background: gold; width: auto; }

p { background: gold; width: -moz-max-content; }

p { background: gold; width: -moz-min-content; }

p { background: gold; width: -moz-available; }

p { background: gold; width: -moz-fit-content; }

Hinweise

Die min-width und max-width Eigenschaften überschreiben die width Eigenschaft.

Browser Kompatibilität

Browser ab Version eigentliche Breite eigentliche, kleinste Breite
Internet Explorer 4.0 --- --- --- ---
Firefox (Gecko) 1.0 (1.0) 3.0 (1.9) -moz-max-content
-moz-fit-content
3.0 (1.9) -moz-min-content
Opera 3.5 --- --- --- ---
Safari (WebKit) 1.0 (85) 2.0 (412) ? intrinsic 2.0 (412) ? min-intrinsic

Spezifikation

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

Schlagwörter: 
Mitwirkende an dieser Seite: fscholz, SJW, Jürgen Jeka, Michael2402
Zuletzt aktualisiert von: fscholz,
Seitenleiste ausblenden