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

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

Значение свойства width может быть переопределено свойствами min-width (если ширина станет меньше минимально допустимого значения) и max-width (если ширина превысит максимально допустимое значение).

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

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

Синтаксис

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

Значения

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

Ссылки

Официальный сайт W3C: https://drafts.csswg.org/css2/visudet.html#propdef-width

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/width

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>

	<style>
		
		p{
		width: 300px;
		height: 100px;
		margin: 20px;
		padding: 20px;
		border: 10px solid green;
		}
		
		.p_1{box-sizing: content-box;}
		
		.p_2{box-sizing: border-box;}

	</style>
	
</head>
<body>
	<p class="p_1">
		box-sizing: content-box;<br>
		width: 300px;<br>
		height: 100px;		
	</p> 
 
	<p class="p_2">
		box-sizing: border-box;<br>
		width: 300px;<br>
		height: 100px;		
	</p>
 </body>
</html>

Пример №1

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №2</title>

	<style>

		div{
		width: 400px;
		box-sizing: border-box;
		margin-top: 3em;
		padding: 0px;
		border: 5px solid blue;
		}

		.height{
		height: 400px;
		}
		
		p{
		width: 50%;
		height: 50%;
		margin: 0px;
		padding: 0px;
		border: 5px solid green;
		}

	</style>
	
</head>
<body>
	<div class="height">
		<p>
			width: 50%;<br>
			height: 50%;	
		</p>
	</div>

	<div>
		<p>
			width: 50%;<br>
			height: 50%;	
		</p>
	</div>	
 </body>
</html>

Пример №2