html.okpython.net
HTML и CSS для начинающих

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

css-свойство max-width (от англ. maximum widthмаксимальная ширина) по умолчанию устанавливает макисмально допустимое значение ширины области содержимого элемента. В обычной ситуации, когда значение свойства width не превышает максимально допустимого значения, используется значение width. Если же значение ширины превысит максимально допустимое значение, будет использовано значение свойства max-width (свойство width при этом будет игнорироваться).

Характеристики

  • Значение по умолчанию: none.
  • Применяется: ко всем элементам, кроме строчных элементов, строк и групп строк таблицы.
  • Наследуется: нет.
  • Анимируется: да.
  • JavaScript: object.style.maxWidth="value".

Синтаксис

max-width: <размер> | <проценты> | none

Значения

  • размер – любые доступные в CSS единицы измерения (смотреть). Отрицательные значения не допускаются.
  • проценты – максимальная ширина элемента вычисляется в процентах относительно ширины родительского элемента либо окна браузера при отсутствии такового.
  • none – отменяет действие свойства.

Ссылки

Примеры

HTML Результат htmlCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>

	<style>
		
		p{
		width: 400px;
		height: 100px;
		margin: 10px;
		padding: 10px;
		border: 10px solid green;
		}
		
		.p_1{max-width: 500px;}
		
		.p_2{max-width: 200px;}

	</style>
	
</head>
<body>
	<p class="p_1">
		width: 400px;<br>
		max-width: 500px;<br>
		Используется width.		
	</p> 
 
	<p class="p_2">
		width: 400px;<br>
		max-width: 200px;<br>
		Используется max-width.		
	</p>
 </body>
</html>	

Пример №1