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

Свойство max-width используется для установки максимальной ширины элемента.

Это свойство не позволяет значению свойства width становиться больше значения, указанного для max-width.

При этом свойство max-width переопределяет свойство width, а свойство CSS min-width переопределяет свойство max-width.

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

Синтаксис

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

css

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

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

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

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        max-width: 50%;
        background-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Max-width property example</h2>
    <div>The max-width of this text is defined as 50%.</div>
  </body>
</html>

Try it Yourself »

Результат

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

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

Пример свойства CSS max-width со значениями в px и em

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        max-width: 250px;
        background-color: #8ebf42;
      }
      p {
        max-width: 20em;
        background-color: #ccc;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <h2>Max-width property example</h2>
    <div>The max-width of this div element is defined as 250px.</div>
    <p>The max-width of this paragraph is defined as 20em.</p>
  </body>
</html>

Try it Yourself »

Значения

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

Практика

Что делает свойство CSS max-width?

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

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

Синтаксис ​

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

Результат ​

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

Значения ​

Практика ​

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

Синтаксис

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

Результат

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

Значения

Практика