CSS свойство width

CSS свойства

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

CSS свойство width устанавливает ширину области содержимого элемента. Свойства min-width и max-width могут переопределить ширину.

CSS свойство width не включает в себя отступы (padding), границы (border) и поля (margin): Свойства height и width.

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

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

CSS синтаксис:

width:"auto | length | initial | inherit";

JavaScript синтаксис:

object.style.width = "10%"

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

ЗначениеОписание
autoБраузер вычисляет ширину самостоятельно. Это значение по умолчанию.
lengthОпределяет ширину в пикселях, см и др.
%Определяет ширину в процентах от содержащего блока родительского элемента.
initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

CSS1

Наследуется

Нет.

Анимируемое

Да.

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

<!DOCTYPE html>
<html>
<head>
<title>Свойства height и width.</title>
<style> 
.primer1 {
width :25px; /* задаём ширину блока */
height :25px; /* задаём высоту блока */
background-color:orange; /* задаём цвет заднего фона */
}
.primer2 {
width :50px; /* задаём ширину блока */
height :50px; /* задаём высоту блока */
background-color:orange; /* задаём цвет заднего фона */
}
.primer3 {
width :75px; /* задаём ширину блока */
height :75px; /* задаём высоту блока */
background-color:orange; /* задаём цвет заднего фона */
}
.primer4 {
width :100px; /* задаём ширину блока */
height :75px; /* задаём высоту блока */
background-color:orange; /* задаём цвет заднего фона */
}
.primer5 {
width :125px; /* задаём ширину блока */
height :75px; /* задаём высоту блока */
background-color:orange; /* задаём цвет заднего фона */
}
</style>
</head>
	<body>
		<div class = "primer1"></div>
		<div class = "primer2"></div>
		<div class = "primer3"></div>
		<div class = "primer4"></div>
		<div class = "primer5"></div>
	</body>
</html>
Пример использования свойств height и width.
Пример использования свойств height и width.
CSS свойства