height - HTML CSS CSS Property

HTML CSS examples for CSS Property:height

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. height

Description

The height CSS property sets the height of the content area of an element.

The content area does not include padding, borders, or margins.

The following table summarizes the height Property.

Item Value
Default value: auto
Applies to:All elements except non-replaced inline elements, table rows, and row groups
Inherited: No
Animatable: Yes.

Syntax

The syntax of the property is as follows: 


height:      length | percentage | auto | initial | inherit

Property Values

The following table describes the values of this property.

Value Description
length Set the height as a length value in px, pt, cm, em, etc. Negative length values are not allowed.
percentage Set the height in percentage. The percentage is calculated with respect to the height of the element's containing block. Negative percentage values are not allowed.
auto The browser will calculate the height for the specified element. This is default value.
initialSets this property to its default value.
inherittake the value of its parent element height property.

The example below shows the height property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS height property</title>
  <style type="text/css">
    p {<!--from w  w  w  . j av  a 2 s. com-->
        height: 50px;
        padding: 10px;
        background-color: #f0e68c;
    }
    img {
        height: 250px;
        border: 5px solid #429ba8;
    }
</style>
 </head>
 <body>
  <div>
   <img src="https://www.java2s.com/style/demo/Opera.png" alt="message">
  </div>
  <p><strong>Note:</strong> Play with the <code>height</code> property value to see how it works.</p>
 </body>
</html>

Related Tutorials