Опубликовано: 18.08.2010 Последняя правка: 08.12.2015

min-width

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

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

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

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

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

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

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

Тип свойства

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

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

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

Значения

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

Размер — относительные или абсолютные величины в единицах измерения принятых в CSS, например: пиксели (px), пункты (pt), сантиметры (cm) и т.д. Отрицательные значения недопустимы.
Проценты — значения в процентах (%), где за 100% берется ширина элемента-предка по следующему алгоритму:
1. Для непозиционируемых и относительно позиционируемых элементов (position:static или relative) минимальная ширина считается относительно ширины ближайшего блочного (block) элемента-предка, встроенного блока (inline-block) или ячейки таблицы, а если таких нет, то относительно тела документа (<BODY>).
2. Минимальная процентная ширина самого тела документа считается относительно ширины корневого элемента (<HTML>).
3. Минимальная ширина корневого элемента считается относительно ширины окна браузера.
4. Для элементов с position:fixed минимальная ширина считается относительно ширины окна браузера.
5. Для элементов с position:absolute минимальная ширина считается относительно ширины элемента, от которого идет позиционирование, причем с учетом его внутренних отступов (padding), а если такого элемента нет, то относительно окна браузера.
Отрицательные процентные значения (-20%) недопустимы. Кроме этого, если ширина элемента-предка, от которого идет расчет, является отрицательной, то процентное значение станет равным нулю (0).
inherit — наследует значение min-width от родительского элемента.

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

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

Синтаксис

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://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 1	CSS 2	CSS 2.1	CSS 3
Поддержка:	Нет	Да	Да	Да

Браузеры

Браузер:	Internet Explorer			Google Chrome	Mozilla Firefox	Opera	Safari
Версия:	6.0	7.0	8.0 и выше	2.0 и выше	2.0 и выше	9.2 и выше	3.1 и выше
Поддержка:	Нет	Частично	Да	Да	Да	Да	Да

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