CSS max-width: управление шириной элемента

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

Как работает max-width

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

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

Рассмотрим простой пример из исходного кода. Допустим, у нас есть блок с текстом, который не должен быть шире 600 пикселей:

div {
  max-width: 600px;
  background: lightblue;
  padding: 20px;
}

В этом случае блок будет занимать 100% ширины родителя, пока она меньше 600px. Когда родитель шире 600px, блок останавливается на 600px и центрируется (если задан margin: auto).

Комбинирование с min-width

Для полного контроля над размерами часто используют пару min-width + max-width. Например:

• min-width: 200px; - элемент не станет уже 200 пикселей.
• max-width: 800px; - элемент не станет шире 800 пикселей.

Таким образом создаётся резиновый блок, который адаптируется под разную ширину экрана.

Отличие max-width от width: 100%

Многие путают max-width: 100% и width: 100%. Первое позволяет элементу быть меньше родителя, если контент не заполняет всю ширину. Второе всегда растягивает элемент до ширины родителя, даже если содержимого мало. max-width: 100% - стандартный приём для адаптивных изображений:

img {
  max-width: 100%;
  height: auto;
}

Это гарантирует, что картинка не вылезет за пределы контейнера, но сохранит пропорции.

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

Свойство max-width поддерживается всеми современными браузерами, включая IE9+. Для старых версий IE (6-8) возможны баги с блочными элементами, но в современных проектах это не актуально.

Типичные ошибки

• Забывают задать display: block - для строчных элементов (например, <span>) max-width не сработает, нужно сменить на display: inline-block или block.
• Не указывают единицы измерения - max-width: 600 без px или % проигнорируется.
• Путают с min-width - max-width ограничивает сверху, min-width - снизу.

Используйте max-width для создания адаптивных и читаемых макетов - это один из базовых инструментов современной вёрстки.