CSS height
The CSS height property fixes the height of an element. It is used to set the height of the content area of an element.
The value of the CSS height property is set to auto. The min and max-height properties can also be used to control the size.
Syntax:
height: auto | length | initial | inherit;
Property Values:
auto – The browser is responsible for calculating the height of the element.
length – The length units such as px, cm, pt, etc.
% – The height of the container in %.
initial – The property to its default value.
inherit – The property from its parent element.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
#auto{
height: auto;
width: 275px;
border: 2px solid blue;
}
#px{
height: 225px;
width: 275px;
border: 2px solid blue;
}
#em{
height: 16em;
width: 275px;
border: 2px solid blue;
}
p{
font-size: 20px;
}
</style>
</head>
<body>
<div id ="auto">
<img src="good-morning.jpg">
<p> The height auto. </p>
</div><br>
<div id ="px">
<img src="good-morning.jpg">
<p> The height 225px. </p>
</div>
</body>
</html>
OUTPUT:
Example :
Height property in percentage.
<!DOCTYPE html>
<html>
<head>
<style>
#per{
position: absolute;
width: auto;
height: 55%;
border: 2px solid red;
}
p{
font-size: 20px;
}
</style>
</head>
<body>
<h2> height: 55%; </h2>
<div id ="per">
<img src="good-morning.jpg">
<p> The height this div element is set to 55%. </p>
</div>
</body>
</html>
OUTPUT:
