CSS Height Property
The CSS height property sets the height of an element's content area.
It does not include padding, borders, or margins. It only affects the area inside the padding, border, and margin of the element. The height can be set using length values (like px) or percentages, but negative values are not allowed.
If the height is set to a specific value (such as in px or %), the content might overflow if it doesn’t fit within the given height. You can manage the overflow by using the overflow property.
If the height is not explicitly set and the element is not absolutely positioned (i.e., using position: absolute), the height defaults to auto. You can also use min-height and max-height to control the element's size.
Syntax
height: auto | <length> | initial | inherit;
Property Values
The values for this property are listed in the table below.
Now, let's look at some examples to better understand this property.
Example
Here, we are using the auto keyword and setting the height property with values 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="img.png">
<p>Welcome</p>
<p>The height of this div element is set to auto.</p>
</div>
<h2>height: 320px;</h2>
<div id="px">
<img src="img1.png">
<p>Welcome</p>
<p>The height of this div element is set to 320px.</p>
</div><br>
<h2>height: 16em;</h2>
<div id="em">
<img src="img2.png">
<p>Welcome</p>
<p>The height of this div element is set to 16em.</p>
</div>
</body>
</html>
Example
Here, we are setting the height property using a percentage value.
<!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="img.png">
<p>Welcome</p>
<p>The height of this div element is set to 65%.</p>
</div>
</body>
</html>
Output
.png)
