The height property is used to set the height of an element. The height property does not contain padding and margin and border of the element.
Syntax:
height: auto|length|initial|inherit;
Default Value: auto
Property Values:
- auto: It is used to set the height property to its default value. If the height property is set to auto then the browser calculates the height of the element.
- length: It is used to set the height of the element in the form of px, cm, etc. The length can not be negative.
- initial: It is used to set the height property to its default value.
- inherit: It is used to set the height property from its parent element.
Example: In this example, we are using height: auto;
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS height Property
</title>
<style>
.Geeks {
height: auto;
color: white;
font-size: 30px;
background-color: green;
}
</style>
</head>
<body>
<h2>CSS height Property</h2>
<div class="Geeks">
GeeksforGeeks: A computer science portal
</div>
</body>
</html>
|
Output:
Example: In this example, we are using height: length; property.
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS height Property
</title>
<style>
.Geeks {
height: 100px;
color: white;
font-size: 30px;
background-color: green;
}
</style>
</head>
<body>
<h2>CSS height Property</h2>
<div class="Geeks">
GeeksforGeeks: A computer science portal
</div>
</body>
</html>
|
Output:
Example: In this example, we are using height: initial; property.
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS height Property
</title>
<style>
.Geeks {
height: initial;
color: white;
font-size: 30px;
background-color: green;
}
</style>
</head>
<body>
<h2>CSS height Property</h2>
<div class="Geeks">
GeeksforGeeks: A computer science portal
</div>
</body>
</html>
|
Output:
Supported Browsers: The browser supported by height property are listed below:
- Google Chrome 1.0 and above
- Edge 12.0 and above
- Internet Explorer 4.0 and above
- Firefox 1.0 and above
- Safari 1.0 and above
- Opera 7.0 and above