CSS height property

This CSS property sets the height of an element. It is used to set the height of content area of an element.

It does not include padding borders or margins, whereas it sets the height of the area inside the padding, border, and margin of the element. It can accept the length and percentage values. But it does not allow negative values.

If we set the height to a numeric value (like in px, %, etc.), the content can be overflow if it does not fit in the given height. We can manage the overflowing content by defining the overflow property.

If the height of the container is not explicitly defined, and the element is not absolutely positioned (i.e., position: absolute;), the value of height property is set to auto. The min-height and max-height properties can also be used to control the size.

Syntax

Property Values

The values of this property are tabulated as follows.

Value	Description
auto	It is a default value. Using this value browser is responsible for calculating the height of the element. Negative values are not allowed.
length	It specifies the height of an element using the length units such as px, cm, pt, etc. Negative values are not allowed.
%	It defines the height of the container in %. Negative values are not allowed.
initial	It is used to set the property to its default value.
inherit	It is used to inherit the property from its parent element.

Now, we will see some of the examples to understand this property more clearly.

Example

Here, we are using the keyword value auto and the length values of height property in px and em.

<!DOCTYPE html>  
<html>  
<head>  
<style>    
#auto{
height: auto;
width: 275px;
border: 2px solid blue;
}
#px{
height: 320px;
width: 275px;
border: 2px solid blue;
}
#em{
height: 16em;
width: 275px;
border: 2px solid blue;
}
p{
font-size: 20px;
}
</style>  
</head>  
<body>  
<h2> height: auto; </h2>
<div id ="auto">
<img src="jtp.png">  
<p> Welcome to the javaTpoint.com </p>  
<p> The height this div element is set to auto. </p>  
</div>
<h2> height: 320px; </h2>
<div id ="px">
<img src="jtp.png">  
<p> Welcome to the javaTpoint.com </p>  
<p> The height this div element is set to 320px. </p>  
</div><br>
<h2> height: 16em; </h2>
<div id ="em">
<img src="jtp.png">  
<p> Welcome to the javaTpoint.com </p>  
<p> The height this div element is set to 16em. </p>  
</div>
</body>  
</html>  

Test it Now

Output

Example

Here, we are specifying the value of height property in percentage.

<!DOCTYPE html>  
<html>  
<head>  
<style>    
#per{
position: absolute;
width: auto;
height: 65%;
border: 2px solid blue;
}

p{
font-size: 20px;
}

</style>  
</head>  
<body>  

<h2> height: 65%; </h2>
<div id ="per">
<img src="jtp.png">  
<p> Welcome to the javaTpoint.com </p>  
<p> The height this div element is set to 65%. </p>  
</div>
</body>  
</html>  

Test it Now

Output