CSS height Property

Last Updated : 27 Aug, 2024

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:

CSS_height property numeric value

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:

CSS height property

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>