The CSS property of height specifies the height of the content area of the element.


value: <length> | <percentage> | auto | inherit
initial value: auto
inherited: no
percentages: specfies percentage height of the containing element
applicable to: all elements (not non-replaced inline elements, table columns, column gorups)

The height property is specified with a <length> in pixels or a percentage. The percentage will be a percentage of the containing element. The default value is auto. This default value of auto will calculate the height of the element by what is contained inside and expand the height accordingly. Most all elements can receive a height property, but with text you use font-size to specify the size of the text, not height.


img.sidephoto {height: 250px;}
.onethirdbox {width: 33%; height: 100%;}

If an image has a height property set to it with the styling, it will hold that height and will reduce or enlarge the original image to fit that height. If the width is not specified, it will be assumed to be auto and the image will reduce in size at the same proportion as the original image. If a width is given in pixels or a percentage as well as the height, there is the possibility of the image being stretched out of proportion.

Padding for the element will be added to the height and will increase the overall height of the image.

You can not specify negative values for height.

Other ways to specify height are:

min-height: sets the minimum value for the height of the element. The element can get larger, but can not get smaller than this height

max-height: sets the maximum value for the height of the element. The element can get small, but can not exceed the height specified.

Take Note: If an element has a "max-height" and a "height" set for it, the element's box cannot exceed the value set with "max-height". The same is true for "min-height". The element will not reduce to a height smaller than the value for "min-height", no matter what the value set for "height".