CSS свойство height

CSS свойства

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

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

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

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

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

CSS синтаксис:

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

JavaScript синтаксис:

object.style.height = "100px"

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

ЗначениеОписание
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 свойства