Skip to content
Related Articles

Related Articles

CSS | height Property

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

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!