Cодержание
Руководство CSS max-width и min-width
View more Tutorials:
Следуйте за нами на нашей фан-странице, чтобы получать уведомления каждый раз, когда появляются новые статьи.
Facebook
CSS max-width используется для настройки максимальной ширины элемента. Он препятствует, чтобы ширина превысила указанное значение.
Примечание: CSS width, min-width, max-width работает только с элементами Block и Inline-Block.
Пример с CSS max-width:
Syntax
/* «length» value */
max-width: 3.5em;
/* «percentage» value */
max-width: 75%;
/* Keyword values */
max-width: none;
max-width: max-content;
max-width: min-content;
max-width: fit-content;
max-width: fill-available;
/* Global values */
max-width: inherit;
max-width: initial;
max-width: unset;
Возможные значения у CSS max-width:
«length»
Назначить определенное значение максимальной ширины, например 150px, 30cm,...
«percentage»
Процентное значение сравнивается с шириной родительского элемента.
none
Ширина элемента не ограничено.
max-content, min-content, fit-content, stretch
CSS min-width используется для настройки минимальной ширины элемента. Он препятствует ширине элемента быть меньше, чем указанное значение.
Примечание: CSS width, min-width, max-width работает только с элементами Block и Inline-Block.
Syntax
/* «length» value */
min-width: 3.5em;
/* «percentage» value */
min-width: 75%;
/* Keyword values */
min-width: auto;
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;
Пример с CSS min-width:
Возможные значения у CSS min-width:
«length»
Указать определенное значение минимальной ширины, например 150px, 30cm,..
«percentage»
Процентное значение по сравнению с шириной родительского элемента.
none
Браузер автоматически расчитает и выберет значение для min-width.
max-content, min-content, fit-content, stretch
