CSS height Property
The height property sets the content height of boxes. In respect of the CSS Box Model the height property sets the height that the content occupies and doesn't include padding, margins or borders.
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 auto.
- auto - the height of the box is calculated by the browser according to the amount of space it computes as necessary for the box - this is the default value if height isn't specified.
- inherit - the value is inherited from the parent element.
The 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{height: 200px;}
Below are some examples of the height property added to This paragraph has been given a height of
8em. This paragraph has been given a height of
8em but it also has top and bottom padding of 2em each. As you can see the value of the
height property is the same as in the previous example but the element height has increased due to the
padding. This paragraph has been given a height of
3em. This paragraph has been given a height set to
auto.<p> elements,
a CSS 2.1 Property List