Skip to content
Tutorial Reference

CSS Height

How the CSS height property works, including its values (auto, length, %, initial, inherit) and how it differs from padding, borders, and margins.

The CSS height property sets the height of an element.

The height property doesn't include padding, borders, or margins. It sets the height of the area inside the padding, border, and margin of the element.

CSS height values

The height property can have the following values:

  • auto This is default. The browser calculates the height
  • length Defines the height in px, cm etc.
  • % Defines the height in percent of the containing block
  • initial Sets the height to its default value
  • inherit The height will be inherited from its parent value

Example:

div {  
	height:  200px;
	background-color:  blue;  
}

CSS max-height

The max-height property defines the maximum height of an element.

If the content is larger than the maximum height, it will overflow. How the container will handle the overflowing content is defined by the overflow property.

If the content is smaller than the maximum height, the max-height property has no effect.

Navigation