CSS height Property

CSS height property sets the height of HTML Element(s).

The syntax to specify a value for height property is

</>
Copy
height: value;

The following table gives the possible values that could be given to height property.

ValueDescriptionExamples
autoThe browser calculates the height based on the content or parent constraints.
Default Value.		height: auto;
CSS LengthA valid length in CSS Length Units.height: 50px;
PercentageHeight in percent of the parent element.height: 20%;
initialSets height to default value.height: initial;
inheritInherits height value from its parent element.height: inherit;

Note: The height does not include padding, border, or margin.

Examples

In the following examples, we set height for the HTML Element(s), using height property, with different possible values.

height in px

In the following example, we set the height of paragraph, with 100px, using height property.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        #p1 {
            border: 1px solid #DDD;
            height: 100px;
        }
    </style>
</head>
<body>
    <p id="p1">This is a paragraph with 100px height.</p>
</body>
</html>

height in Percentage

In the following example, we set the height of paragraph with 20%. Since, the parent of this paragraph is div, 20% of the div’s height is set as paragraph’s height.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        #div1 {
            border: 1px solid blue;
            height:300px;
        }
        #p1 {
            border: 1px solid red;
            height: 20%;
        }
    </style>
</head>
<body>
    <div id="div1">
        <p id="p1">This is a paragraph with 20% height.</p>
    </div>
</body>
</html>

Conclusion

In this CSS Tutorial, we learned about height property, and how to use this property for HTML Elements, with examples.