CSS height Property

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>
        .Beginner {
            height: auto;
            color: white;
            font-size: 30px;
            background-color: green;
        }
    </style>
</head>
 
<body>
    <h2>CSS height Property</h2>
 
    <div class="Beginner">
        w3wiki: A computer science portal
    </div>
</body>
</html>


Output: 

Example: In this example, we are using height: length; property.

html




<!DOCTYPE html>
<html>
<head>
    <title>
        CSS height Property
    </title>
 
    <style>
        .Beginner {
            height: 100px;
            color: white;
            font-size: 30px;
            background-color: green;
        }
    </style>
</head>
 
<body>
    <h2>CSS height Property</h2>
 
    <div class="Beginner">
        w3wiki: A computer science portal
    </div>
</body>
</html>


Output: 

Example: In this example, we are using height: initial; property.

html




<!DOCTYPE html>
<html>
<head>
    <title>
        CSS height Property
    </title>
 
    <style>
        .Beginner {
            height: initial;
            color: white;
            font-size: 30px;
            background-color: green;
        }
    </style>
</head>
 
<body>
    <h2>CSS height Property</h2>
 
    <div class="Beginner">
        w3wiki: A computer science portal
    </div>
</body>
</html>


Output: 

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


Contact Us