Свойство min-width

Свойството min-width задава минималната ширина на елемент. Стойности на свойството са всякакви единици за размери или ключовата дума none, която означава липса на стойност.

Обикновено се задава за елемент с плаваща ширина (ширината е зададена в проценти или не е зададена изобщо, а елементът по ширина се разширява от съдържанието си). Ако ширината на елемента е зададена в проценти - при намаляване на прозореца на браузъра тя ще се намалява, докато достигне стойността min-width.

Синтаксис

cssселектор {
  max-width: стойност;
}

Пример

В този пример ширината съставлява процент от ширината на родителя. Намалете прозореца на браузъра по ширина, и контейнерът също ще се намали, за да се настрои спрямо ширината на прозореца на браузъра. Обаче той ще се намалява само до величина, определена в min-width, това са 400px. Щом контейнерът достигне тази ширина - той ще спре да се намалява:

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

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

Результат:

Пример

В този пример ширината на контейнера е ограничена от двете страни: той няма да може да стане по-голям от 900px и по-малък от 400px:

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

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

Результат:

Вижте също