Руководство CSS max-width и min-width
View more Tutorials:
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
