Max-width, max-height, min-width, min-height: максимальные и минимальные размеры элемента

Несколько уроков назад мы рассматривали свойства width и height для установки фиксированной ширины и высоты элемента. Но современный CSS не ограничивается этими свойствами и предлагает нам намного более гибкую настройку стилей.

Свойства min-width/min-height и max-width/max-height позволяют задавать минимальную и максимальную ширину/высоту соответственно. Разберем их по порядку:

• min-width — с помощью этого свойства вы можете указать минимальную ширину элемента. Например, если вы зададите блоку стиль min-width: 50px, то ширина блока может стать больше, но она никогда не станет меньше, чем 50 пикселей. Это очень удобно, например, при создании адаптивной верстки, когда при определенных размерах экрана элемент с относительной шириной становится слишком узким. Свойство min-width позволяет предотвратить такие искажения.
• min-height — работает аналогично предыдущему свойству, но только по отношению к высоте элемента. Безусловно, это тоже очень полезное свойство в практике, которое позволяет задать минимальную высоту элемента.
• max-width — как вы уже догадались, это свойство позволяет задать максимально допустимую ширину элемента. Например, элемент со стилем max-width: 960px может иметь ширину меньше максимальной, но он никогда не станет больше, чем 960 пикселей. Данное свойство удобно использовать при создании адаптивной разметки, когда вам необходимо, чтобы элемент адаптировался под ширину экрана любого устройства, но при этом не слишком широко разъезжался на больших экранах.
• max-height — работает аналогично предыдущему свойству, только по отношению к высоте. Но, как мы уже говорили ранее, лучше не играть с ограничением высоты элемента без крайней надобности.
• auto — это значение можно использовать для отмены действия свойства.

Итак, все эти свойства позволяют легко контролировать допустимые размеры элементов, при этом не фиксируя их намертво, как это делают обычные свойства width и height. Их можно комбинировать, задавая для одного элемента минимальную и максимальную ширину/высоту. Значения можно устанавливать в любых единицах измерения CSS. Словом, все возможности для реализации очень гибкой верстки.

div {
	width: 100%;
	min-width: 100px;
	max-width: 600px;
}

Что с кроссбраузерностью?

Поддержка браузерами свойств max-width, max-height, min-width, min-height практически стопроцентная. Данную запись не понимает только Internet Explorer 6.

Далее в учебнике: «плавающие» элементы и свойство float.