The height property specifies the height of the content area of an element. The content area is inside the padding, border, and margin of the element.

  • Initial valueauto
  • Applies toAll except for table columns, column groups, and non-replaced inline elements
  • InheritedNo
  • MediaVisual
  • Computed valueThe percentage or 'auto' (see prose under [percentage]) or the absolute length; 'auto' if the property does not apply
  • AnimatableYes
  • CSS VersionCSS1, CSS2, CSS3
  • JavaScript syntaxobject.style.height
Formal syntax: <length> | <percentage> | auto

height: 200px;    /* Length values */
height: 20em;
height: 80%       /* Percentage value */
height: auto;     /* auto keyword */
  • <length>Specifies the width of the content area using a length unit.
  • <percentage>Integer, followed by a %. The value is a percentage of the width of the parent object, whether or not it is specified explicitly. Negative values are not allowed.
  • autoThe width depends on the values of other properties. See the sections below.
  • border-boxIf border-box is used, the length or percentage defined will be applied to the element's border box.
  • content-boxIf content-box is used, the length or percentage defined will be applied to the element's content-box.
  • autoIf auto is set for the elements width, the browser will determine the width for the element.
  • max-contentThe intrinsic preferred width
  • min-contentThe intrinsic minimum width
  • availableThe containing block width minus horizontal margin, border, and padding
  • fit-contentThis will be either the large of the minimum width or the smaller of the preferred width and the available width
.class {
   height: 100px;
   width: 63px;
}

Click the button below to experiment with this property.

Give it a Try!

1+Firefox6+Explorer1+Chrome1+Safari8+Opera


Last updated on 23rd March 2014 By Rene Spronk

View All CSS Properties

Errors? Please help to keep this list up to date, If you find any errors, please contact us, so that we can get them fixed.