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>                     

Output:
CSS height property auto

inherit: It is used to set height property from its parent element.

Supported Browsers: The browser supported by height property are listed below:

Google Chrome 1.0
Internet Explorer 4.0
Firefox 1.0
Safari 1.0
Opera 7.0

My Personal Notes

Related Articles