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

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

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

В качестве значения свойство принимает длину CSS (px, pt, em и т. д.) или процент.

INFO

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

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

Синтаксис

Синтаксис свойства CSS min-width

css

min-width: <length> | <percentage> | initial | inherit;

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

Пример свойства CSS min-width со значением в пикселях

html

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title of the document</title>
    <style>
      div {
        width: 10px;
        min-width: 70%;
        background-color: #1c87c9;
        color: #ffffff
      }
    </style>
  </head>
  <body>
    <div>The min-width of this text is defined as 70%.</div>
  </body>
</html>

Try it Yourself »

Результат

CSS min-width Property

Здесь минимальная ширина элемента составляет 10 см:

Пример свойства min-width, заданного в "см":

Пример свойства CSS min-width со значением в сантиметрах

html

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title of the document</title>
    <style>
      span {
        background-color: #ccc;
        min-width: 0;
      }
      .example {
        min-width: 10cm;
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <h2>Min-width property example</h2>
    <h3>Min-width: 0:</h3>
    <span>Minimum width is set to 0.</span>
    <h3>min-width: 10cm:</h3>
    <span class="example">Minimum width is set to 10cm.</span>
  </body>
</html>

Try it Yourself »

Значения

Значение	Описание	Запустить
length	Определяет минимальную ширину в px, pt, см и т. д. Значение по умолчанию — 0.	Запустить »
%	Устанавливает минимальную ширину в % от ширины родительского элемента.	Запустить »
initial	Заставляет свойство использовать значение по умолчанию.	Запустить »
inherit	Наследует свойство от родительского элемента.

Практика

В чем функциональность свойства 'min-width' в CSS?

Позволяет задать минимальную ширину элементаПозволяет задать максимальную ширину элементаПозволяет задать минимальную высоту элементаПомогает предотвратить уменьшение значений свойства 'width' ниже заданныхПомогает повернуть элемент

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

Синтаксис ​

Пример использования свойства min-width: ​

Результат ​

Пример свойства min-width, заданного в "см": ​

Значения ​