CSS Height

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;  
}

note

Remember that 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 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.

note

This prevents the value of the height property from becoming larger than max-height. The value of the max-height property overrides the height property.