Опубликовано: 18.08.2010 Последняя правка: 10.12.2015
CSS1CSS2CSS2.1CSS3
IEChromeFireFoxOperaSafari

min-width

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

Иногда может случиться так, что содержимое не сможет вместиться в заданные или вычисленные размеры. Тогда оно будет размещено поверх элемента и его окружения. В таких случаях поможет свойство overflow.

Во избежание «конфликта» размеров, при вычислении итоговой ширины браузеры используют определенный алгоритм расчетов:

Вычисление ширины элементов
Соотношение первичных значенийИтоговая ширина
Если min-width < widthwidth
Если min-width < width < max-widthwidth
Если min-width < width > max-widthmax-width
Если min-width > widthmin-width
Если min-width > width > max-widthmin-width
Если min-width > width < max-widthmin-width

В данной таблице знак «>» означает «больше», а «<» — «меньше». А width — это ширина указанная в свойстве width или (если это свойство отсутствует) предварительная ширина элемента до учета минимальной и максимальной ширины.

Но с замещаемыми элементами (изображения, объекты, апплеты и т.д.) браузеры действуют по более сложному алгоритму. Дело в том, что такие элементы изначально имеют свои внутренние ширину (width) и высоту (height), поэтому и вычисляются сразу оба этих размера. Причем браузеры по возможности стараются сохранить пропорции.

Вычисление размеров замещаемых элементов
Соотношение первичных значенийИтоговая ширинаИтоговая высота
Если width > max-width, где (max-width * height/width) < min-heightmax-widthmin-height
Если height < max-height, где (min-height * width/height) > max-width
Если (width > max-width) и (height > max-height), где (max-width/width ≤ max-height/height) и (min-height > max-width * height/width)
Если (width < min-width) и (height < min-height), где (min-width/width ≤ min-height/height) и (max-width < min-height * width/height)
Если (width > max-width) и (height < min-height)
Если width < min-width, где (min-width * height/width) > max-heightmin-widthmax-height
Если height > max-height, где (max-height * width/height) < min-width
Если (width > max-width) и (height > max-height), где (max-width/width > max-height/height) и (min-width > max-height * width/height)
Если (width < min-width) и (height < min-height), где (min-width/width > min-height/height) и (max-height < min-width * height/width)
Если (width < min-width) и (height > max-height)
Если width > max-width, где (max-width * height/width) > min-heightmax-widthmax-width * height/width
Если (width > max-width) и (height > max-height), где (max-width/width ≤ max-height/height) и (min-height < max-width * height/width)
Если width < min-width, где (min-width * height/width) < max-heightmin-widthmin-width * height/width
Если (width < min-width) и (height < min-height), где (min-width/width > min-height/height) и (max-height > min-width * height/width)
Если height > max-height, где (max-height * width/height) > min-widthmax-height * width/heightmax-height
Если (width > max-width) и (height > max-height), где (max-width/width > max-height/height) и (min-width < max-height * width/height)
Если height < max-height, где (min-height * width/height) < max-widthmin-height * width/heightmin-height
Если (width < min-width) и (height < min-height), где (min-width/width ≤ min-height/height) и (max-width > min-height * width/height)

Тип свойства

Назначение: размеры.

Применяется: ко всем элементам, кроме незамещаемых встроенных (inline) элементов (<SPAN>, <B>, <EM> и т.д.), тегов <COL> и <COLGROUP> и элементов с display: table-column и table-column-group.

Наследуется: нет.

Значения

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

Процентная запись: относительно ширины элемента-предка или окна браузера.

Значение по умолчанию: 0.

Синтаксис

min-width: размер | проценты | inherit

Пример CSS: использование min-width

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - CSS свойство min-width</title>
  <style type="text/css">
   div {
    min-width: 300px; /* минимальная ширина блока DIV */
    height: 100px; /* высота блока */
    overflow: auto; /* полосы скроллинга */
    border: 2px red solid; /* стили рамки */
   }
  </style>
 </head>
 <body>
  <div>
   <img src="images/fauna.png" width="290" height="67" alt="Представители фауны">
  </div>
 </body>
</html>

Результат примера

Версии CSS

Версия:CSS 1CSS 2CSS 2.1CSS 3
Поддержка:НетДаДаДа

Браузеры

Браузер:Internet ExplorerGoogle ChromeMozilla FirefoxOperaSafari
Версия:6.07.08.0 и выше2.0 и выше2.0 и выше9.2 и выше3.1 и выше
Поддержка:НетЧастичноДаДаДаДаДа

Internet Explorer 7.0 не понимает значение inherit. Также этот браузер может неправильно вычислять размер замещаемых элементов, например изображений, когда min-width указывается совместно с height.