Eigenschaft min-width

Die Eigenschaft min-width legt die minimale Breite eines Elements fest. Als Wert für die Eigenschaft dienen beliebige Einheiten für Größen oder das Schlüsselwort none, was das Fehlen eines Wertes bedeutet.

Wird normalerweise für ein Element mit variabler Breite gesetzt (die Breite ist in Prozent angegeben oder überhaupt nicht gesetzt, und das Element passt seine Breite an seinen Inhalt an). Wenn die Breite des Elements in Prozent angegeben ist - wird sie bei Verkleinerung des Browserfensters verringert, bis sie den Wert von min-width erreicht.

Syntax

Selektor {
	max-width: Wert;
}

Beispiel

In diesem Beispiel beträgt die Breite einen Prozentsatz der Breite des Elternelements. Verringern Sie die Breite des Browserfensters, und der Container wird sich ebenfalls verkleinern, um sich der Breite des Browserfensters anzupassen. Allerdings wird er sich nur bis zu dem in min-width definierten Wert verkleinern, dies sind 400px. Sobald der Container diese Breite erreicht hat, wird er sich nicht weiter verkleinern:

<div id="elem"></div>

#elem {
	width: 70%;
	min-width: 400px;
	height: 300px;
	border: 1px solid black;
}

Beispiel

In diesem Beispiel ist die Breite des Containers auf beiden Seiten begrenzt: Er kann nicht größer als 900px und nicht kleiner als 400px werden:

<div id="elem"></div>

#elem {
	width: 70%;
	min-width: 400px;
	max-width: 900px;
	height: 100px;
	border: 1px solid black;
}

Siehe auch

die Eigenschaft max-width,
die die maximale Breite eines Elements festlegt
die Eigenschaft max-height,
die die maximale Höhe eines Elements festlegt
die Eigenschaft min-height,
die die minimale Höhe eines Elements festlegt