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

Spezifikation

• CSS 2.1 Visual formatting #max-width

Siehe auch

• width, min-width
• height, min-height, max-height