CSS Property height








This defines the height of an element's content area. This property is ignored for inline nonreplaced elements.

Summary

ItemValue
Initial value auto
Inherited No.
Version CSS1
JavaScript syntax object.style.height="50px"
Applies to Block-level




CSS Syntax

height: length  | percentage  | auto | inherit 

Property Values

The property values are listed in the following table.

Value Description
auto Default value. The browser calculates the height.
length Set the height in px, cm, etc.
% Set the height in percent of the containing element
inherit Inherit the height property from the parent element

Browser compatibility

height Yes Yes Yes Yes Yes




Example

The following code uses px and em based value to set the height.

img.icon {height: 50px;} 
h1 {height: 1.75em;}
<!DOCTYPE HTML>
<html>
<head>
  <style>
p.one {<!--   w ww. ja  v  a 2 s  .co  m-->
  width: 200px;
  height: 100px;
  padding: 5px;
  margin: 10px;
  border-style: solid;
  border-color: #000000;
  border-width: 2px;
}

p.two {
  width: 300px;
  height: 100px;
  padding: 5px;
  margin: 10px;
  border-style: solid;
  border-color: #000000;
  border-width: 2px;
}
</style>
</head>

<body>
<p class="one">
    This paragraph should be 
    200 pixels wide by 300 pixels high.
</p>
<p class="two">
    This paragraph should be 
    300 pixels wide by 100 pixels high.
</p>
</body>
</html>

Click to view the demo