max-width

Übersicht

Die max-width Eigenschaft wird verwendet, um die maximale Breite eines Elements festzulegen. Das verhindert, dass der benutzte Wert der width Eigenschaft nicht größer wird als der festgelegte Wert von max-width.

Hinweis: max-width überschreibt width, allerdings überschreibt min-width auch max-width.

  • Standardwert: none
  • Anwendbar auf: Blockelemente und ersetzte Elemente, für <table> siehe Browser Kompatibilität
  • Vererbbar: Nein
  • Prozentwerte: beziehen sich auf die Breite des umschließenden Blocks
  • Medium: visuell
  • berechneter Wert: die Prozentzahl wie festgelegt, die absolute Länge oder none

Syntax

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

Werte

<Längenangabe>
Siehe Länge für mögliche Einheiten.
Prozentzahl
Eine prozentuale Angabe, die sich auf die Breite des umschließenden Blocks bezieht.
none
Das Element verfügt über keine maximale Breite.
inherit
Der Wert des Elternelements wird geerbt.

Mozilla Erweiterungen

-moz-max-content
Bevorzugte intrinsische Breite.
-moz-min-content
Minimale intrinsische Breite.
-moz-available
Die Breite des umschließenden Blocks minus horizontalen margin, padding und border Werten.
-moz-fit-content
Gleichbedeutend zu -moz-max-content.

Beispiele

body  { max-width: 40em; }
table { max-width: 75%; }
form  { max-width: none; }

Beispiel 1

p { background: gold }

The Mozilla community produces a lot of great software.

Beispiel 2

p { background: lightgreen;
    max-width:  intrinsic;         /* Safari/WebKit */
    max-width:  -moz-max-content;  /* Firefox/Gecko */
  }

The Mozilla community produces a lot of great software.

Beispiel 3

p { background: lightblue;  max-width: -moz-min-content; }

The Mozilla community produces a lot of great software.

Browser Kompatibilität

Browser ab Version auf <table> anwendbar intrinsische Breite minimale intrinsische Breite
Internet Explorer 7.0 nein --- --- --- ---
Firefox (Gecko) 1.0 (1.0) ja 3.0 (1.9) -moz-max-content 3.0 (1.9) -moz-min-content
Opera 4.0 ja --- --- --- ---
Safari (WebKit) 2.0.2 (416), vorher fehlerhaft nein 2.0 (412) ? intrinsic --- ---

Spezifikation

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

 Zuletzt aktualisiert von: fscholz,