CSS height property
CSS is all about presentation. Discover how CSS height property works to transform plain HTML into a premium user experience in the guide below.
This CSS attribute establishes the vertical dimension of a specific element. It is applied to define the vertical size of the content area within an element.
It excludes padding, borders, or margins, instead defining the height of the content area within the padding, border, and margin of the element. This property can take length and percentage values, but it does not permit negative values.
If the height is specified using a numerical value (e.g., in pixels, percentage, etc.), there is a possibility of content overflowing if it exceeds the designated height. To control this overflowing content, we can define the overflow property.
If the container's height is not specifically specified and the element is not in absolute positioning (e.g., position: absolute;), the height property defaults to auto. You can also utilize the min-height and max-height properties to manage the dimensions.
Syntax
height: auto | length | initial | inherit;
Property Values
The values for this attribute are presented in the following table.
| 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 employing the keyword value auto and utilizing the length values of height property in pixels and em units.
<!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="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image">
<p> Welcome to the C# Tutorial </p>
<p> The height this div element is set to auto. </p>
</div>
<h2> height: 320px; </h2>
<div id ="px">
<img src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image">
<p> Welcome to the C# Tutorial </p>
<p> The height this div element is set to 320px. </p>
</div><br>
<h2> height: 16em; </h2>
<div id ="em">
<img src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image">
<p> Welcome to the C# Tutorial </p>
<p> The height this div element is set to 16em. </p>
</div>
</body>
</html>
Output
Example
Here, we are defining the height property value using a 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="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image">
<p> Welcome to the C# Tutorial </p>
<p> The height this div element is set to 65%. </p>
</div>
</body>
</html>
Output
