# Свойство min-width

Свойство `min-width` устанавливает минимальную ширину элемента. Значением свойства служат любые единицы для размеров либо ключевое слово `none`, означающее отсутствие значения.

Обычно задается для элемента с плавающей шириной (ширина задана в процентах или не задана вообще, а элемент по ширине раздвигается своим содержимым). Если ширина элемента задана в процентах - при уменьшении окна браузера она будет уменьшаться, пока не достигнет значения `min-width`.

## Синтаксис

`селектор { max-width: значение; }`

## Пример

В данном примере ширина составляет процент от ширины родителя. Уменьшите окно браузера по ширине, и контейнер тоже уменьшится, чтобы подстроиться под ширину окна браузера. Однако он будет уменьшаться только до величины, определенной в `min-width`, это `400px`. Как только контейнер достигнет этой ширины - он перестанет уменьшаться:

`<div id="elem"></div>` `#elem { width: 70%; min-width: 400px; height: 300px; border: 1px solid black; }`

:

## Пример

В данном примере ширина контейнера ограничена с обоих сторон: он не сможет стать больше `900px` и меньше `400px`:

`<div id="elem"></div>` `#elem { width: 70%; min-width: 400px; max-width: 900px; height: 100px; border: 1px solid black; }`

:

## Смотрите также

- свойство `max-width`,
  которое задает максимальную ширину элемента
- свойство `max-height`,
  которое задает максимальную высоту элемента
- свойство `max-height`,
  которое задает минимальную высоту элемента

←→
↑