css властивість max-width
CSS властивість max-width встановлює максимально допустиму ширину елемента.
Ця властивість не дає значенню властивості width стати більшим, ніж max-width.
Ширини елемента розраховується в залежності від встановлених значень властивостей width, max-width і min-width.
max-width перевизначає width, але min-width перевизначає max-width.
В якості значень можна використовувати одиниці довжини, проценти, а також ключові слова.
| Порівняння | Умова | Значення | Умова | Порівняння | Встановлена ширина |
|---|---|---|---|---|---|
| min-width | < | width | < | max-width | width |
| width | < | max-width | width | ||
| width | > | max-width | max-width | ||
| min-width | > | width | > | max-width | min-width |
| min-width | > | width | < | max-width | min-width |
Дані з таблиці слід розуміти так, якщо значення ширини (width) більше значення max-width, то ширина елемента приймається рівною значенню max-width (Для третього рядка таблці).
| Нотатка: | Властивість |
| Нотатка: | Ключові слова впливають на розрахунок ширини й висоти елементу(й не залежать від значення властивості |
Синтаксис
max-width: none|length|initial|inherit;Властивість max-width може отримувати 4 значення:
noneСкасовує максимальну ширину. Без задання.
lengthВ якості значення приймаються пікселі (px), відсотки (%) і інші одиниці виміру прийняті в CSS. Від`ємні значення не допускаються.
initialВстановлює цю властивість в значення без задання
inheritУспадкує значення властивості від свого батьківського елемента
| Значення без задання: | none |
|---|---|
| Наслідує: | Ні |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.maxWidth="600px" |
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
| max-width | 1.0 |
8.0 |
1.0 |
1.0 |
3.5 |
| Переглядач | |||
|---|---|---|---|
| max-width | 1.0 |
1.0 |
1.0 |
Мобільних переглядачів ще не додано.
Приклади
Динамічний приклад
Демонстрація роботи властивості
Як задати максимальну ширину для елементу.
Ми задали максимально допустиму ширину елемента <p>.
p {
max-width: 100px;
}