The property height specifies the height of the boxes. This property does not apply to inline elements that are non-replaced (like images, objects etc...).

Height property

The height property contains following information:

  1. value: <length>, <percentage>, auto or inherit;
  2. initial: auto;
  3. applies to: all elements except non-replaced inline, table columns and row columns;
  4. inherited: no;
  5. percentages: refers to height of containing block;
  6. media: visual;
  7. computed value: percentage or auto as specified, or the absolute length.

If the value is defined as percentage then it will be calculated with respect to the height of the box's containing block. If the height of the containing block is not specified (i.e. depends on the content's height), and the element is positioned as absolute, the value will end up being auto. In the case of being positioned as absolute and its containing block is a block-level element, the height will be calculated with respect to the height of the box's padding area. The value length refers to a regular length unit while the value auto will make the height depending on other properties (margins, children's properties...). Negative values are not allowed.

To limit the height of the content, two properties may be used (if the browser allows it): min-height and max-height.

Setting minimum and maximum values

The min- height and max- height properties contain following information:

  1. value: <length>, <percentage> or inherit (min-height); <length>, <percentage>, none or inherit (max-height);
  2. initial: 0 (min-height); none (max-height);
  3. applies to: all elements except non-replaced inline, table columns and row columns;
  4. inherited: no;
  5. percentages: refers to height of containing block;
  6. media: visual;
  7. computed value: percentage as specified, or the absolute length (min-height); percentage as specified, or the absolute length or none (max-height).

If the value is defined as percentage then it will be calculated with respect to the height of the box's containing block. If the containing block's height is not specified (i.e. depends on the content's height), and the element is positioned as absolute, the percentage value is treated as "0" for min-height and "none" for max-height. The value length specifies the fixed value for the constraint properties while the value none (max-height only) naturally puts no limits to the height of the box. Negative values are not allowed.

For elements with the intrinsic ratio and width and height specified as auto, the content's height will be calculated according the following table:

Constraint rules
Constraint violation Resolved width Resolved height
none w h
w > max-width max-width max(max-width * h/w, min-height)
w < min-width min-width min(min-width * h/w, max-height)
h > max-height max(max-height * w/h, min-width) max-height
h < min-height min(min-height * w/h, max-width) min-height
(w > max-width) and (h > max-height), where (max-width/w = max-height/h) max-width max(min-height, max-width * h/w)
(w > max-width) and (h > max-height), where (max-width/w > max-height/h) max(min-width, max-height * w/h) max-height
(w < min-width) and (h < min-height), where (min-width/w = min-height/h) min(max-width, min-height * w/h) min-height
(w < min-width) and (h < min-height), where (min-width/w > min-height/h) min-width min(max-height, min-width * h/w)
(w < min-width) and (h > max-height) min-width max-height
(w > max-width) and (h < min-height) max-width min-height

To learn how to calculate height with respect to margins go the "CSS Advanced" chapter.

Example

CSS element's height example:

 

›› go to examples ››