CSS свойство min-width

❮ Назад Вперед ❯

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

Min-width отменяет использование свойств width и max-width.

Свойство может быть указано в единицах измерения длины CSS (px, pt, em и т. д.) или в процентах.

Отрицательные значения недопустимы.

Значение по умолчанию	none
Применяется	Ко всем элементам, кроме незаменяемых элементов, строк таблицы и групп строк.
Наследуется	Нет
Анимируемое	Да. Ширина анимируема.
Версия	CSS2
DOM синтаксис	object.style.minWidth = "200px";

Синтаксис

min-width: none | length | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      div {
      width:10px;
      min-width:70%;
      background-color: #1c87c9;
      color: #fff
      }
    </style>
  </head>
  <body>
    <div>Значение свойства min-width этого текста равно 70%.</div>
  </body>
</html>

Попробуйте сами!

Пример, где минимальная ширина элемента равна 10cm:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      span {
      background-color: #ccc;
      min-width: none;
      }
      .example {
      min-width: 10cm;
      display: inline-block;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства  min-width</h2>
    <h3>Min-width: none:</h3>
    <span>Минимальная ширина указана как none.</span>
    <h3>min-width: 10cm:</h3>
    <span class="example">Минимальная ширина равна 10cm.</span>
  </body>
</html>

Попробуйте сами!

Значения

Значение	Описание
auto	Устанавливает минимальную ширину. Значение по умолчанию
length	Устанавливает минимальную ширину в единицах измерения длины (px, pt, cm и т. д.). Значение по умолчанию - 0.
%	Устанавливает минимальную ширину в процентах.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Значение свойства наследуется от родительского элемента.


1.0+	12.0+	1.0+	2.0+	4.0+

1.0+

12.0+

1.0+

2.0+

4.0+

CSS свойство min-width

Синтаксис

Пример

Пример

Значения

Поддержка браузера

Практикуйте свои знания