max-width
Поддержка браузерами
| 12.0+ | 7.0+ | 1.0+ | 1.0+ | 7.0+ | 2.0.2+ |
Описание
CSS свойство max-width устанавливает максимальную допустимую ширину области для содержимого элемента.
Примите во внимание, что полная ширина элемента вычисляется по формуле:
max-width+padding(левый и правый)+border(ширина рамки)
т.е. если вы зададите max-width: 500px, padding: 5px, border 1px, то максимальная ширина получится 512px.
Примечание: CSS свойство max-width работает только с блочными элементами.
| Значение по умолчанию: | none |
|---|---|
| Применяется: | ко всем элементам, кроме незаменяемых строчных элементов, столбцов таблицы и групп столбцов |
| Анимируется: | да |
| Наследуется: | нет |
| Версия: | CSS2 |
| Синтаксис JavaScript: | object.style.maxWidth="100px" |
Синтаксис
max-width: none|величина|%|inherit;
Значения свойства
| Значение | Описание |
|---|---|
| none | Максимальная ширина отсутствует. |
| величина | Задает максимальную ширину в единицах измерения CSS. |
| % | Максимальная ширина указывается в процентах и высчитывается в зависимости от высоты родительского элемента. |
| inherit | Указывает, что значение наследуется от родительского элемента. |
Пример
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Пример</title>
<style>
p {
max-width: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<p>Максимальная ширина данного абзаца - 100px</p>
</body>
</html>
Результат данного примера в окне браузера:
