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 Значение элемента наследуется от родительского элемента.

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

chrome edge firefox safari opera
1.0+ 12.0+ 1.0+ 2.0+ 4.0+

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

What does the CSS property 'max-width' do?
Считаете ли это полезным?