css властивість min-width


Властивість 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 перевизначає властивості max-width та width.

Нотатка:

Якщо вікно браузера по ширині стає менше заданої мінімальної ширини елемента, то ширина елемента залишається незмінною, а у вікні з'являється горизонтальна смуга прокрутки.

Нотатка:

Ключові слова впливають на розрахунок ширини й висоти елементу(й не залежать від значення властивості box-sizing). Це не стосується до значень у одиницях довжини або процентах.

Синтакс

min-width: length|initial|inherit;

Властивість min-width може отримувати 3 значення:

length

Як значення приймаються пікселі (px), відсотки (%) і інші одиниці виміру, прийняті в CSS. Від`ємні значення не допускаються.

initial

Встановлює цю властивість в значення без задання

inherit

Успадкує значення властивості від свого батьківського елемента

Значення без задання: 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;
}

Додаткові посилання

Всі Коментарі (0)

Зареєструйся на сайті, аби мати змогу залишати коментарі. Зареєструватися  чи
Немає Коментарів