CSS | height Property

Last Updated : 11 Jan, 2019

The height property is used to set the height of an element. The height property does not contains padding and margin and border of element.

Syntax:

height: auto|length|initial|inherit;

Property Values:

auto: It is used to set height property to its default value. If the height property set to auto then the browser calculates the height of element.

Syntax:

height: auto;

Example:

<!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

length: It is used to set the height of element in form of px, cm etc. The length can not be negative.

Syntax:

height: length;

Example:

<!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

initial: It is used to set height property to its default value.

Syntax:

height: initial;

Example:

<!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>                    