Минимальная ширина элемента: min-width

min-width

Поддержка браузерами
Настольные браузеры Chrome Firefox Internet Explorer Opera Safari
Базовая поддержка, версии браузеров 1.0 1.0 7.0 4.0 2.0.2
Мобильные браузеры Android Firefox Mobile IE Phone Opera Mobile Safari Mobile
Базовая поддержка, версии браузеров 4.1.2 1.0.1 7.5 12.0 6.1.3
Свойство
min-width — это свойство позволяет задать минимальную ширину элемента.
Описание

Свойство min-width нужно для того чтобы предотвратить уменьшение блочного элемента. Например, если при уменьшении окна браузера блок становится слишком маленьким, то это свойство позволяет установить необходимую минимальную ширину для отображения элемента.

Каждый элемент на странице представляет собой блок, этот блок имеет несколько составляющих — поля, границы, отступы и непосредственно сам контент:

Поля — margin

Границы — border

Отступы — padding

Контент

Каждая составляющая блока имеет четыре стороны, эти стороны имеют следующие названия:

width

Минимальная ширина рассчитывается следующим образом:

таким образом если элементу присвоить следующее правило:

то минимальная ширина будет равняться:

Наследование
Не наследуется. Это значит что стили применённые к родительскому элементу не передадутся потомкам
Применяется
К блочным элементам (кроме таблиц) и замещаемым встроенным элементам (к таким элементам относятся, например, изображения)

Существует возможность сделать из строчного элемента блочный, для этого к строчному элементу нужно применить свойство display со значением block

Может принимать значения
значение в абсолютных единицах | значение в относительных единицах | inherit
Значение по умолчанию
0
Правила записи
свойство: значение;
Примеры

div-min-width

Видно что появляется горизонтальная полоса прокрутки для того чтобы прочитать содержимое второго контейнера div, так как он не может быть меньше 400 пикселей

Поделиться