min-width
Минимальная ширина: уже элемент стать не может.
Синтаксис
min-width: value;Значения
| Параметр | Тип | Описание |
|---|---|---|
| px | length | Минимум в пикселях. |
| % | percentage | Процент от ширины родителя. |
| 0 | number | Разрешает элементу flex или grid сжиматься уже своего содержимого. |
Примеры
Кнопки не уже заданной ширины:
<style>
.btn { min-width: 120px; padding: 6px; }
</style>
<button class="btn">OK</button>
<button class="btn">Cancel</button>
<button class="btn">Save and continue</button>Примечания
У flex-элементов по умолчанию min-width: auto, поэтому длинное слово или широкая таблица не дают им сжиматься. min-width: 0 у элемента исправляет эту частую ошибку.
См. также
- max-width — Максимальная ширина: элемент может быть уже, но не шире.
- width — Ширина элемента.
- flex-shrink — Насколько сжимается flex-элемент, когда места не хватает.
В учебнике
- Блочная модель — Из чего состоит элемент в CSS — содержимое, padding, border и margin, размеры, центрирование и box-sizing.