Nov 2015

CSS min-width und max-width

CSS min-width und max-width legen die minimale bzw. maximale Breite von HTML-Blöcken fest. min-width / max-width enthält kein padding, border oder margin.

Eine Box wird niemals schmaler als in min-width angegeben, darf aber breiter werden, wenn der Inhalt min-width überschreitet. Eine Box mit max-width wird nicht breiter, selbst wenn CSS width einen größeren Wert enthält.

min-width und max-width regeln z.B. die Laufweite von Texten innerhalb von flexiblen Blöcken oder die Breite des body-Elements in flexiblen Layouts auf eine minimale bzw. maximale Breite.

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).

Eine Box mit min-width kann durch ein übergroßes Element – z.B. durch ein Bild – verbreitert werden.

Bei einer Box mit max-width kann ein übergroßes Element zwar über die Grenzen der Box hinaus laufen, aber die maximale Breite der Box wird durch das übergroße Element nicht gedehnt.

CSS min-width

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.

CSS max-width

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.