basics of website design banner photo

HTML

HTML 5

CSS 2.1

CSS 3

Reference

CSS min-height Property

The min-height property sets the minimum height of the content box in an element.

Possible Values

  • A length value:
    • em - relative unit - the width of the 'font-size' of the font in use.
    • ex - relative unit - the height of the letter 'x' in the current font.
    • in - absolute unit - inches.
    • mm - absolute unit - millimeters.
    • cm - absolute unit - centimeters.
    • pt - absolute unit - points - a point is 1/72nd of an inch.
    • pc - absolute unit - picas - one pica = 12 pt.
    • px - absolute unit - pixel - one pixel = 0.75 pt.
  • a percentage - in relation to the height of the block that contains the box - if the block height isn't specifically given and this element isn't absolutely positioned this value becomes 0 - the initial value if min-height is not set.
  • inherit - the value is inherited from the parent element.

The min-height property is not permitted on table columns or table column groups where the <td> elements dictate the height of the columns, it also cannot be used on non-replaced inline elements.

Code Example

p{min-height: 100px;}

The min-height property only applies to the height of the content in an element and has no effect on padding, margins or borders.

The two examples below show how elements with the same min-height value can appear very different due to the addition of top and bottom padding, a background-color has been added to illustrate this point.

This <div> element has a min-height of 12em but no padding.This <div> element has a min-height of 12em but no padding.This <div> element has a min-height of 12em but no padding.This <div> element has a min-height of 12em but no padding.This <div> element has a min-height of 12em but no padding.
This <div> element has a min-height of 12em with top and bottom padding of 4em.This <div> element has a min-height of 12em with top and bottom padding of 4em. This <div> element has a min-height of 12em with top and bottom padding of 4em.This <div> element has a min-height of 12em with top and bottom padding of 4em. This <div> element has a min-height of 12em with top and bottom padding of 4em.

CSS 2.1 Property List