# min-height property

The `min-height` property sets a minimum height of an element. The property value is any size units or the `none` keyword, meaning no value.

Typically set for an element with a floating width (the height is set as a percentage or not set at all, and the element’s height is expanded by its content).

If a minimum height is specified, then the element cannot become smaller than this height. If there is less text than needed for `min-height`, the element will have a height of `min-height`.

If there is more text, the height of the element will be calculated depending on the amount of text.

## Syntax

`selector { min-height: value; }`

## Example

In this example, the height is not set at all and will be calculated by the browser itself depending on the amount of text. However, since the `min-height` property is set, the height will not decrease below this value, even if there is no text at all:

`<div id="elem"> Lorem ipsum dolor sit amet. </div>` `#elem { min-height: 100px; width: 300px; border: 1px solid black; }`

:

## Example

Let's add more text to the element so that the block's height overflows. In this case, our block will simply increase its height:

`<div id="elem"> some long text... </div>` `#elem { min-height: 100px; width: 300px; border: 1px solid black; text-align: justify; }`

:

## Example

For comparison, let's see what will happen to the block if we remove its minimum height and instead set the `height` property:

`<div id="elem"> some long text... </div>` `#elem { height: 100px; width: 300px; border: 1px solid black; text-align: justify; margin-bottom: 50px; }`

:

## See also

- the `max-height` property
  that sets a maximum height of an element
- the `max-width` property
  that sets a maximum width of an element
- the `min-width` property
  that sets a minimum width of an element

← →
↑
en ru