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

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

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

## Синтаксис

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

## Пример

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

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

:

## Пример

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

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

:

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

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

←→
↑