CSS max-height property

Definition and Usage

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

Description

This property value sets a maximum height limit for the element's height setting. Therefore, the element can be shorter than the specified value, but not taller. Negative values are not allowed.

Note:The max-height property does not include margin, border, and padding.

See Also:

CSS Tutorial:CSS Dimensions

CSS Tutorial:min-height Property

HTML DOM Reference Manual:maxHeight Property

Example

Set the maximum height of a paragraph:

p
  {
  max-height:100px;
  }

Try It Yourself

CSS Syntax

max-height: none;length|initial|inherit;

Property Value

Value Description
none Default. Specifies that there is no limit to the maximum height allowed for the element.
length Specifies the maximum height value of the element.
% Specifies the percentage of the maximum height based on the containing block-level object.
inherit Specifies that the value of the max-height property should be inherited from the parent element.

Technical Details

Default Value: none
Inheritance: no
Version: CSS2
JavaScript Syntax: object.style.maxHeight="50px"

Try It Yourself Example

Set the maximum height of an element
This example demonstrates how to set the maximum height of an element.

Browser support

The numbers in the table indicate the first browser version that fully supports this attribute.

Chrome IE / Edge Firefox Safari Opera
1.0 7.0 1.0 2.0.2 7.0