Właściwość min-width

Właściwość min-width ustawia minimalną szerokość elementu. Wartościami właściwości są dowolne jednostki wymiarów lub słowo kluczowe none, oznaczające brak wartości.

Zwykle jest ustawiana dla elementu o płynnej szerokości (szerokość podana w procentach lub wcale nieustawiona, a element rozszerza się na szerokość przez swoją zawartość). Jeśli szerokość elementu jest podana w procentach - przy zmniejszaniu okna przeglądarki będzie się zmniejszać, aż osiągnie wartość min-width.

Składnia

selektor {
	max-width: wartość;
}

Przykład

W tym przykładzie szerokość wynosi procent szerokości rodzica. Zmniejsz okno przeglądarki wszerz, a kontener również się zmniejszy, aby dostosować się do szerokości okna przeglądarki. Jednakże będzie się zmniejszać tylko do wielkości określonej w min-width, czyli 400px. Gdy kontener osiągnie tę szerokość - przestanie się zmniejszać:

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

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

Przykład

W tym przykładzie szerokość kontenera jest ograniczona z obu stron: nie będzie mógł stać się większy niż 900px i mniejszy niż 400px:

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

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

Zobacz też

właściwość max-width,
która ustawia maksymalną szerokość elementu
właściwość max-height,
która ustawia maksymalną wysokość elementu
właściwość min-height,
która ustawia minimalną wysokość elementu