Stil mit {stil}

Nov 07

CSS min-width und max-width
Minimale und maximale Breite eines Elements

Mit den Eigenschaften min-width und max-width lassen sich z.B. die Laufweite von Texten innerhalb von flexiblen Boxen oder die Breite des body-Elements in flexiblen Layouts auf eine minimale bzw. maximale Breite regeln.

body { min-width: 560px; }
… 
<div style="float: left; width: 200px;"> …  </div>
<div style="float: left; width: 360px;"> …  </div>

verhindert, dass Layoutelemente, die mit der CSS-Eigenschaft float festgelegt sind, untereinander rutschen, wenn das Browserfenster kleiner als 1000px gezogen wird.

p { min-width: 30em; max-width: 46em; }

verhindert, dass Text in Absätzen durch ein Verkleinern des Browserfensters auf eine kürzere Zeilenlänge als 30em umgebrochen wird und auch nicht breiter als 46em läuft (Internet Explorer 6 unterstützt min-width / max-width noch nicht).

• height width
• line-height
• min-height max-height
• [ min-width max-width ]
• vertical-align

min-width

IE7 M1 Safari1 CSS2 Erblich: Nein

min-width

gibt die minimale Breite eines Elements an. max-height gehört zu einer Gruppe von Eigenschaften, mit denen Höhe, Breite, maximale Höhe, maximale Breite, minimale Höhe und minimale Breite bestimmt werden.

Werte

<length> | <percentage> | inherit

Wenn max-width kleiner als ein zuvor definierter Wert für min-width ist, wird max-width auf den Wert von min-width gesetzt. Wenn der Wert für min-width größer als der aktuelle Wert für width ist, wird width auf den Wert von min-width gesetzt.

<length>

kann in einer der folgenden Maßeinheiten angegeben werden: cm (Zentimeter), em (ems), ex (x-Höhe), in (Inch), mm (Millimeter), pc (Pica), pt (Punkt), px (Pixel).

<percentage (Prozentsatz)

gibt die Elementhöhe als Prozentsatz der Höhe des umfassenden Blocks an, in dem das Element liegt, und ist eine positive ganze Zahl. Das Prozentzeichen ist zwingend erforderlich.

max-width

IE7 M1 Safari1 CSS2 Erblich: Nein

max-width

gibt die maximale Breite eines Elements an. max-width gehört zu einer Gruppe von Eigenschaften, mit denen Höhe, Breite, maximale Höhe, maximale Breite, minimale Höhe und minimale Breite bestimmt werden.

Werte

<length> | <percentage> | none | inherit

Wenn max-width kleiner als ein zuvor spezifizierter Wert für min-width ist, wird max-width auf den Wert von min-width gesetzt. Wenn min-width größer als der Wert width für das gleiche Element ist, wird width auf den Wert von min-width gesetzt.

none

gibt an, dass keine Einschränkungen bezüglich der Höhe des Elements gelten.

<length>

kann in einer der folgenden Maßeinheiten angegeben werden: cm (Zentimeter), em (ems), ex (x-Höhe), in (Inch), mm (Millimeter), pc (Pica), pt (Punkt), px (Pixel).

<percentage> (Prozentsatz)

gibt die Elementhöhe als Prozentsatz der Höhe des umfassenden Blocks an, in dem das Element liegt, und ist eine positive ganze Zahl. Das Prozentzeichen ist zwingend erforderlich.

Die Voreinstellung ist 0.

zurück zum Seitenanfang