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

cssselektor {
  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ć:

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

css#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:

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

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

Результат:

Zobacz też