CSS свойство max-width

CSS свойства

Определение и применение

CSS свойство max-width устанавливает максимальную ширину элемента. Свойство применяется к блочным элементам.

Поддержка браузерами

СвойствоChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
max-width1.01.07.02.0.27.012.0

CSS синтаксис:

max-width:"none | length | initial | inherit";

JavaScript синтаксис:

object.style.maxWidth = "100px"

Значения свойства

ЗначениеОписание
noneМаксимальная ширина не предусмотрена. Это значение по умолчанию
lengthОпределяет максимальную ширину (в единицах измерения CSS).
%Определяет максимальную ширину (в процентах). Ширина высчитывается в зависимости от ширины родительского элемента.
initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

CSS2

Наследуется

Нет.

Анимируемое

Да.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title>Минимальная и максимальная ширина элемента.</title>
<style> 
.test {
min-width  : 100px; /* задаём минимальную ширину для блока */
background-color : khaki; /* устанавливаем цвет заднего фона для элемента */
}
.test2 {
min-width  : 100px; /* задаём минимальную ширину для блока */
max-width  : 200px; /* задаём максимальную ширину для блока */
background-color : orange; /* устанавливаем цвет заднего фона для элемента */
}
</style>
</head>
	<body>
		<div class = "test">Блок в котором установлена минимальная ширина 100px.</div><br>
		<div class = "test2">Блок в котором установлена минимальная ширина 100px и максимальная 200px..</div>
	</body>
</html>
Пример установки минимальной и максимальной ширины для элемента..
Пример установки минимальной и максимальной ширины для элемента.
CSS свойства
×

Кажется, вы используете блокировщик рекламы :(

Этот ресурс не является коммерческим проектом и развивается на энтузиазме автора сайта, который посвящает все свое свободное время этому проекту.

Добавьте, пожалуйста, basicweb.ru в исключения блокировщика рекламы, этим вы поможете развитию проекта.