- min-width¶
- Демо¶
- Синтаксис¶
- Значения¶
- Спецификации¶
- Поддержка браузерами¶
- Описание и примеры¶
- min-width
- Синтаксис
- Значения
- Объектная модель
- Браузеры
- min-width
- Синтаксис
- Значения
- Объектная модель
- Браузеры
- min-width
- Try it
- Syntax
- Values
- Formal definition
- Formal syntax
- Examples
- Setting minimum element width
- Specifications
- Browser compatibility
- See also
- Found a content problem with this page?
- MDN
- Support
- Our communities
- Developers
min-width¶
Свойство min-width устанавливает минимальную ширину элемента.
Если окно браузера по ширине становится меньше заданной минимальной ширины элемента, то ширина элемента остается неизменной, а в окне появляется горизонтальная полоса прокрутки.
Значение ширины элемента будет вычисляться в зависимости от установленных значений свойств width , max-width и min-width .
Если значение ширины ( width ) меньше значения min-width , то ширина элемента принимается равной min-width .
Демо¶
Синтаксис¶
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
/* value */ min-width: 3.5em; /* value */ min-width: 10%; /* Keyword values */ min-width: max-content; min-width: min-content; min-width: fit-content; min-width: fill-available; /* Global values */ min-width: inherit; min-width: initial; min-width: unset; Значения¶
В качестве значений принимаются пиксели (px), проценты (%) и другие единицы измерения, принятые в CSS. Отрицательные значения не допускаются.
auto Минимальная ширина для flex-элементов по умолчанию, предоставляет более разумное значение по умолчанию, чем 0 для других способов разметки.
max-content Внутренняя предпочтительная ширина.
min-content Внутренняя минимальная ширина.
fill-available Ширина родительского блока минус горизонтальные margin , border , и padding . (Обратите внимание, что некоторые браузеры реализуют устаревшее имя для этого ключевого слова available .)
fit-content Определяет как min(max-content, max(min-content, fill-available)) .
Применяется ко всем элементам, кроме строчных и таблиц
Спецификации¶
Поддержка браузерами¶
Can I Use minmaxwh? Data on support for the minmaxwh feature across the major browsers from caniuse.com.
Описание и примеры¶
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
html> head> meta charset="utf-8" /> title>min-widthtitle> style> .container min-width: 420px; /* Минимальная ширина контейнера */ > .col1 background-color: #fc0; /* Цвет фона колонки */ padding: 5px; /* Поля вокруг текста */ float: left; /* Обтекание по правому краю */ width: 150px; /* Ширина левой колонки */ > .col2 background-color: #c0c0c0; /* Цвет фона колонки */ padding: 5px; /* Поля вокруг текста */ width: 250px; /* Ширина правой колонки */ float: left; /* Обтекание по правому краю */ > style> head> body> div class="container"> div class="col1">Колонка 1div> div class="col2">Колонка 2div> div> body> html> min-width
Устанавливает минимальную ширину элемента. Если окно браузера по ширине становится меньше заданной минимальной ширины элемента, то ширина элемента остается неизменной, а в окне появляется горизонтальная полоса прокрутки.
Значение ширины элемента будет вычисляться в зависимости от установленных значений свойств width , max-width и min-width . В табл. 1 показано, чем руководствуется браузер при совместном использовании указанных стилевых свойств.
| Значения свойств | Ширина | ||||
|---|---|---|---|---|---|
| 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: значение | проценты | inherit
Значения
В качестве значений принимаются пикселы (px), проценты (%) и другие единицы измерения, принятые в CSS. Отрицательные значения не допускаются. inherit наследует значение родителя.
HTML5 CSS2.1 IE Cr Op Sa Fx
Результат данного примера показан на рис. 1.
Рис. 1. Результат использования min-width в браузере
Объектная модель
[window.]document.getElementById(» elementID «).style.minWidth Браузеры
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .
min-width
Устанавливает минимальную ширину элемента. Если окно браузера по ширине становится меньше заданной минимальной ширины элемента, то ширина элемента остается неизменной, а в окне появляется горизонтальная полоса прокрутки.
Значение ширины элемента будет вычисляться в зависимости от установленных значений свойств width , max-width и min-width . В табл. 1 показано, чем руководствуется браузер при совместном использовании указанных стилевых свойств.
Табл. 1. Ширина элемента Значения свойств Ширина 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: значение | проценты | inherit
Значения
В качестве значений принимаются пикселы (px), проценты (%) и другие единицы измерения, принятые в CSS. Отрицательные значения не допускаются. inherit наследует значение родителя.
HTML5 CSS2.1 IE Cr Op Sa Fx
Результат данного примера показан на рис. 1.
Рис. 1. Результат использования min-width в браузере
Объектная модель
[window.]document.getElementById(» elementID «).style.minWidth Браузеры
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .
min-width
The min-width CSS property sets the minimum width of an element. It prevents the used value of the width property from becoming smaller than the value specified for min-width .
Try it
The element’s width is set to the value of min-width whenever min-width is larger than max-width or width .
Syntax
/* value */ min-width: 3.5em; /* value */ min-width: 10%; /* Keyword values */ min-width: max-content; min-width: min-content; min-width: fit-content(20em); /* Global values */ min-width: inherit; min-width: initial; min-width: revert; min-width: revert-layer; min-width: unset;
Values
Defines the min-width as an absolute value.
Defines the min-width as a percentage of the containing block’s width.
The browser will calculate and select a min-width for the specified element.
The intrinsic preferred min-width .
The intrinsic minimum min-width .
Uses the fit-content formula with the available space replaced by the specified argument, i.e. min(max-content, max(min-content, argument)) .
Formal definition
Initial value auto Applies to all elements but non-replaced inline elements, table rows, and row groups Inherited no Percentages refer to the width of the containing block Computed value the percentage as specified or the absolute length Animation type a length, percentage or calc();
Formal syntax
min-width =
auto |
|
min-content |
max-content |
fit-content( )
=
|
Examples
Setting minimum element width
table min-width: 75%; > form min-width: 0; > Specifications
Browser compatibility
BCD tables only load in the browser
See also
Found a content problem with this page?
This page was last modified on Jul 18, 2023 by MDN contributors.
Your blueprint for a better internet.
MDN
Support
Our communities
Developers
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.
