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.
- Нотатка
-
Властвість
автор: Svitlanamin-widthперевизначає властивостіmax-widthтаwidth. - Нотатка
-
Якщо вікно браузера по ширині стає менше заданої мінімальної ширини елемента, то ширина елемента залишається незмінною, а у вікні з'являється горизонтальна смуга прокрутки.
автор: Svitlana - Нотатка
-
Ключові слова впливають на розрахунок ширини й висоти елементу(й не залежать від значення властивості
автор: Svitlanabox-sizing). Це не стосується до значень у одиницях довжини або процентах.
Синтаксис
min-width: length|initial|inherit;Властивість min-width може отримувати 3 значень:
-
length -
Як значення приймаються пікселі (px), відсотки (%) і інші одиниці виміру, прийняті в CSS. Від`ємні значення не допускаються.
автор: Svitlana -
initial -
Встановлює цю властивість в значення без задання
автор: Svitlana -
inherit -
Успадкує значення властивості від свого батьківського елемента
автор: Svitlana
| Значення без задання: | 0 |
|---|---|
| Наслідує: | Ні |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.minWidth="400px" |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | 4 | 12 | 7 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
Обидві кнопки з однаковим коротким текстом, але першій задано мінімальну ширину 150px — вміст її не стискає.
HTML
<button class="min">ok</button>
<button>ok</button>CSS
.min {
min-width: 150px;
}Динамічний приклад
Демонстрація роботи властивості
Приклад задання мінімальної ширини елементів.
Коментарі
Коментарів ще немає — будьте першим!