Proprietà min-width

La proprietà min-width imposta la larghezza minima di un elemento. I valori accettati dalla proprietà sono qualsiasi unità di misura per le dimensioni oppure la parola chiave none, che indica l'assenza di un valore.

Di solito viene impostata per un elemento con larghezza fluida (la larghezza è impostata in percentuale o non è impostata affatto, e l'elemento si espande in larghezza in base al suo contenuto). Se la larghezza di un elemento è impostata in percentuale, quando si riduce la finestra del browser essa diminuirà finché non raggiunge il valore di min-width.

Sintassi

selettore {
	max-width: valore;
}

Esempio

In questo esempio la larghezza è una percentuale della larghezza del genitore. Riducete la larghezza della finestra del browser, e anche il contenitore si ridurrà, per adattarsi alla larghezza della finestra del browser. Tuttavia, esso si ridurrà solo fino al valore definito in min-width, che è 400px. Non appena il contenitore raggiunge questa larghezza - smetterà di ridursi:

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

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

Esempio

In questo esempio la larghezza del contenitore è limitata da entrambi i lati: non potrà diventare più grande di 900px e più piccolo di 400px:

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

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

Vedi anche

la proprietà max-width,
che imposta la larghezza massima di un elemento
la proprietà max-height,
che imposta l'altezza massima di un elemento
la proprietà min-height,
che imposta l'altezza minima di un elemento