Skip to content
Related Articles

Related Articles

CSS | height Property

View Discussion
Improve Article
Save Article
  • Last Updated : 02 Aug, 2022

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;

Default Value: 

  • auto 

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: 

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

  • 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: 

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

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

Syntax: 

height: initial;

Example: 

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>                   


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 and above
  • Edge 12.0 and above
  • Internet Explorer 4.0 and above
  • Firefox 1.0 and above
  • Safari 1.0 and above
  • Opera 7.0 and above

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!