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 (Для третього рядка таблці).
- Нотатка
-
Властивість
автор: NagarDmax-widthперевизначає властивістьwidth. - Нотатка
-
Ключові слова впливають на розрахунок ширини й висоти елементу(й не залежать від значення властивості
автор: NagarDbox-sizing). Це не стосується до значень у одиницях довжини або процентах.
Синтаксис
max-width: none|length|initial|inherit;Властивість max-width може отримувати 4 значень:
-
none -
Скасовує максимальну ширину. Без задання.
автор: NagarD -
length -
В якості значення приймаються пікселі (px), відсотки (%) і інші одиниці виміру прийняті в CSS. Від`ємні значення не допускаються.
автор: NagarD -
initial -
Встановлює цю властивість в значення без задання
автор: NagarD -
inherit -
Успадкує значення властивості від свого батьківського елемента
автор: NagarD
| Значення без задання: | none |
|---|---|
| Наслідує: | Ні |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.maxWidth="600px" |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | 4 | 12 | 7 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
Ширина абзацу не може перевищити 100 пікселів — текст переноситься у вузьку колонку.
HTML
<p class="lim">Ширина не більша за 100 пікселів — текст переноситься.</p>CSS
p.lim {
max-width: 100px;
border: 2px solid #0172ad;
}Динамічний приклад
Демонстрація роботи властивості
Як задати максимальну ширину для елементу.
Коментарі
Коментарів ще немає — будьте першим!