CSS height Property

The height property is used to specify an element's height. Padding, margin, and element border are not included in the height property.

Syntax

height: auto | length | initial | inherit;

Example

<!DOCTYPE html>
<html>
<head>
<style>
    .h-auto {
        height: auto;
        border: 1px solid #212b36;
    }
    .h-30 {
        height: 30px;
        border: 1px solid #212b36;
    }
</style>
</head>
<body>

<div class="h-auto">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet.</div>
<br><br>
<div class="h-30">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet.</div>

</body>
</html>

Preview

Property Values

Value	Description
auto	The height is calculated by the browser. This is the default setting.
length	Defines the height in pixels, centimeters, and so on. Learn more about length units.
%	Defines the height of the containing block as a percentage.
initial	This property is set to its default value.
inherit	This property is inherited from its parent element.

Supported Browsers

Property	Chrome	Firefox	Safari	Edge / IE	Opera
height	1.0	1.0	1.0	4.0	7.0

hanging-punctuation

hyphens

CSS height Property

Syntax

Example

Property Values

Supported Browsers

Links

Tutorials

Connect with us