CSS min-height property

It set the minimum-height of the element's content box. It means that the height of the content box can be greater than the min-height value, but cannot be shorter. It sets the lower bound on the element's height.

It will be applied when the content is smaller than the minimum height; otherwise, if the content is larger, this property has no effect. This property ensures that the value of height property cannot be less than the value of the min-height property. It does not allow negative values.

Syntax

The values of this CSS property are defined as follows:

none: It is the default value that does not limit the size of the content box.

length: This value defines the min-height in px, cm, pt, etc. Its default value is 0.

initial: It sets the property to its default value.

inherit: It inherits the property from its parent element.

Now, let's see an example of using this CSS property.

Example

In this example, there are four paragraph elements with the content. We are defining the minimum-height of these paragraphs using the length value of min-height property. The minimum height of the first paragraph is 50px, the second paragraph is 6em, the third paragraph is 130pt, and the fourth paragraph is 5cm.

Output