CSS height Property

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

As the height property by default sets the height of the content area of an element only. Therefore, the element’s margin, padding, and border are not included in its height.

The height value can be specified in any valid CSS length format such as px, em, rem, cm, etc. Try out the example below to see how it works:

Example:

div{
  height: 200px;
}

The height of the element can also be specified in %. Here, the height value is calculated from the height of the parent element.

In the example below, the child element takes 50% height of its parent i.e. 50% of 200px = 100px. Try it out to see how it works:

Example:

.parent{
  height: 200px;
}
.child{
  height: 50%;
}

CSS Syntax

The height property has the below syntax:

height: auto|length|%|initial|inherit;

Property Values

The height property accepts the following values:

autoThe browser itself calculates the height value to fit in the content. This is the default value.
lengthSets the height of the element in a valid CSS length format such as px, em, rem, cm, etc.
%Sets the height of the element in percentage(%). The percentage value is calculated from the height of the parent element.
initialSets the height property to its default value(auto).
inheritInherits the height from its parent element.

General Info

Default Valueauto
InheritedNo
JavaScript Usageelement.style.height = “200px”;