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

Свойство max-width устанавливает максимальную ширину элемента.

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

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

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

Синтаксис

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

Пример

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

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

В следующем примере первый элемент указан в "px", а второй указан в "em":

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      div {
      max-width: 250px;
      background-color: #8ebf42;
      }
      p {
      max-width: 20em;
      background-color: #ccc;
      color: #fff;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства max-width</h2>
    <div>Значение свойства max-width этого div элемента равно 250px.</div>
    <p>Значение свойства max-width этого параграфа равно 20em.</p>
  </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 свойство max-width

Синтаксис

Пример

Пример

Значения

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

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