css властивість min-width
Властивість min-width використовується, щоб встановити мінімальну ширину елемента.
Це запобігає значенню властивісті width ставати меншим за значення min-width.
Значення ширини елемента розраховується в залежності від встановлених значень властивостей width, max-width і min-width.
Ширина елементу може дорівнювати значенню заданому для min-wіdth, коли значення min-wіdth більше за значення max-wіdth або width.
| Значенння властивості | Ширина | ||||
|---|---|---|---|---|---|
| min-width | < | width | < | max-width | width |
| min-width | > | width | > | max-width | min-width |
| min-width | > | width | < | max-width | min-width |
| min-width | < | width | width | ||
| min-width | > | width | min-width | ||
| min-width | > | max-width | min-width | ||
| min-width | < | max-width | max-width |
Дані з таблиці слід розуміти так, якщо ширина елемента (width) менше за значення min-width, то ширина стане рівною значенню min-width.
| Нотатка: | Властвість |
| Нотатка: | Якщо вікно браузера по ширині стає менше заданої мінімальної ширини елемента, то ширина елемента залишається незмінною, а у вікні з'являється горизонтальна смуга прокрутки. |
| Нотатка: | Ключові слова впливають на розрахунок ширини й висоти елементу(й не залежать від значення властивості |
Синтаксис
min-width: length|initial|inherit;Властивість min-width може отримувати 3 значення:
| Значення без задання: | 0 |
|---|---|
| Наслідує: | Ні |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.minWidth="400px" |
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
| min-width | 1.0 |
7.0 |
1.0 |
1.0 |
7.0 |
| Переглядач | |||
|---|---|---|---|
| min-width | 1.0 |
1.0 |
1.0 |
Мобільних переглядачів ще не додано.
Приклади
Динамічний приклад
Демонстрація роботи властивості
Приклад задання мінімальної ширини елементів.
Синтаксис властивості
p {
min-width: 150px;
}