Максимальная ширина элемента: max-width

max-width

Поддержка браузерами
Настольные браузеры Chrome Firefox Internet Explorer Opera Safari
Базовая поддержка, версии браузеров 1.0 1.0 7.0 4.0 2.0.2
Мобильные браузеры Android Firefox Mobile IE Phone Opera Mobile Safari Mobile
Базовая поддержка, версии браузеров 4.1.2 1.0.1 7.5 12.0 6.1.3
Свойство
max-width — это свойство позволяет задать максимальную ширину элемента.
Описание

Каждый элемент на странице представляет собой блок, этот блок имеет несколько составляющих — поля, границы, отступы и непосредственно сам контент:

Поля — margin

Границы — border

Отступы — padding

Контент

Каждая составляющая блока имеет четыре стороны, эти стороны имеют следующие названия:

width

Максимальная ширина рассчитывается следующим образом:

таким образом если элементу присвоить следующее правило:

то высота будет равняться:

Наследование
Не наследуется. Это значит что стили применённые к родительскому элементу не передадутся потомкам
Применяется

К блочным элементам (кроме таблиц) и замещаемым встроенным элементам (к таким элементам относятся, например, изображения)

Существует возможность сделать из строчного элемента блочный, для этого к строчному элементу нужно применить свойство display со значением block

Может принимать значения
значение в абсолютных единицах | значение в относительных единицах | none | inherit
Значение по умолчанию
none
Правила записи
свойство: значение;
Примеры

<p>

Максимальная ширина этого абзаца 330 пикселей + ширина границ

</p>

<p>

Максимальная ширина этого абзаца 13em + ширина границ

</p>

<div>

Максимальная ширина этого контейнера 65% от родительского элемента, в данном случае родительским элементом является ячейка таблицы

</div>

<div>

Когда установлено значение none это означает что максимальная ширина не задана

</div>

<p>

Это значит что свойство унаследует значение от родителя

</p>

Поделиться