CSS HEIGHT

  • Share
  • Share

This property specifies the height of an element’s rendering box for block-level and replaced elements (for other types of elements, height calculations are taken from their inherited or assigned ‘line-height’ value.)

If an element’s computed height is greater than that specified by the ‘height’ property, the content will overflow the rendering box according to the ‘overflow’ property. Negative values for the ‘height’ property are not allowed.

In addition to the ‘height’ property, two other properties – ‘min-height’ and ‘max-height’ – place constraints on the allowed value for an element’s rendering box height. The ‘height’ value is first computed without consideration for these other two properties. If the computed value is greater than the ‘max-height’ value or less than the ‘min-height’ value, the height is re-calculated using the ‘max-height’ or ‘min-height’ as the new ‘height’ value.

 

Example

img.class1 { height: 75px; width: 75px }

<img style=”height: 75px; width: 75px” src=”image.jpg” mce_src=”image.jpg”>

 

Possible Values

Value Description
inherit Explicitly sets the value of this property to that of the parent.
auto The height is determinant on the values of other properties.
[length] Refers to an absolute measurement for the computed element box height. Negative values are not allowed.
[percentage] Refers to a percentage of the height of the containing element block. If a height is not explicitly given for the containing block, it should be treated like ‘auto’.