The real (used) values of an element's height and margins are calculated with the regards to element's box type, relationship with its containing block and its position in the document's flow.

To distinguish the situations from one another, the following list must be observed:

  1. Inline, regular elements.
  2. Inline, replaced (images, objects?) elements.
  3. Block-level, regular elements in normal flow.
  4. Block-level, replaced elements in normal flow.
  5. Floated, regular elements in normal flow.
  6. Floated, replaced elements.
  7. Absolutely positioned, regular elements.
  8. Absolutely positioned, replaced elements.
  9. Inline-block, regular elements in normal flow.
  10. Inline-block, replaced elements in normal flow.

Inline, regular elements

  • The height property is ignored and the computed value should be based on the font size.
  • The vertical paddings, borders and margins start at top and the bottom of the content area.
  • The line-height is used to calculate the height of the inline box.

Inline, replaced (images, objects?) elements, Block-level, replaced elements in normal flow, Inline-block, replaced elements in normal flow and Floated, replaced elements

  • The computed value of auto for margin-top or margin-bottom properties becomes a used value of "0".
  • If the values width and height are both set to auto and the element has its intrinsic height, the intrinsic height becomes its used value of height.
  • If heightproperty has the computed value set to auto and the element has intrinsic ratio, the used value of height will be the result of (used width) / (intrinsic ratio).
  • If heightproperty has the computed value set to auto and the element has intrinsic height, the intrinsic height becomes its used value of height.
  • Otherwise, if heightproperty has the computed value set to auto but no other conditions are met, the used value of height is set to the height of the largest rectangle that has the ratio "2:1", the height is not greater then "150px" and the width fits the containing block's width.

Block-level, regular elements in normal flow when overflow is set to visible

  • The computed value of auto for margin-top or margin-bottom properties becomes a used value of "0".
  • If the height property is set to auto, the height will depend whether the element has block-level children positioned in normal flow and whether it has paddings or borders in following manner:
    • The element's height is the distance from its top content edge to the first applicable of the following situations:
      1. The bottom edge of the last line box, if the box establishes an inline formatting context with one or more lines.
      2. The bottom edge of the bottom (possibly collapsed) margin of its last in-flow child, if the child's bottom margin does not collapse with the element's bottom margin.
      3. The bottom border edge of the last in-flow child whose top margin doesn't collapse with the element's bottom margin.
      4. Otherwise, the height is set as "0".

Absolutely positioned, regular elements

  • The height of the containing block is equal to the sum of top, margin-top, border-top-width, padding-top, height, padding-bottom, border-bottom-width, margin-bottom and bottom.
  • If all three of top, height and bottom are set to auto, the top will be set to the static position and rule #3 from below.
  • If none of the three is set to auto, if both margin-top and margin-bottom are auto, modify the equation so that those two margins get equal values.
  • If one of margin-top or margin-bottom is auto the equation will be modified for that value.
  • If the values are over-constrained, ignore the set value for bottom and calculate that value.
  • Otherwise, pick one of the following rules:
    1. Properties top and height are auto and property bottom is not auto, then the height is resolved according Auto heights for block formatting context roots, set the auto values for margin-top and margin-bottom to "0" and calculate the top property.
    2. Properties top and bottom are auto and property height is not auto, then set the property top to the static position, set auto values for properties margin-top and margin-bottom to "0" and calculate the bottomproperty.
    3. Properties height and bottom are auto and property top is not auto, then the height is resolved according Auto heights for block formatting context roots, set the auto values for margin-top and margin-bottom to "0" and calculate the bottom property.
    4. Properties top, height and bottom are not auto, then set auto values for margin-top and margin-bottom to "0" and calculate the top property.
    5. Property height is auto, properties top and bottom are not auto, then set auto values for margin-top and margin-bottom to "0" and calculate the height property.
    6. Property bottom is auto, properties top and height are not auto, then set auto values for margin-top and margin-bottom to "0" and calculate the bottom property.

Absolutely positioned, replaced elements

  • The calculation is same as the previous one, except that the element has intrinsic height.
  • The following rules apply:
    1. The used value of height property is determined as for Inline replaced elements. If margin-top or margin-bottom properties is specified as auto its used value is determined by the rules below.
    2. If both top and bottom properties have the value auto, replace the set value for the property top with the element's static position.
    3. If propertybottom is auto, replace any auto on margin-top or margin-bottom properties with "0".
    4. If at this point both margin-top and margin-bottom properties are still auto, solve the equation so that the two margins must get equal values.
    5. If at this point there is an auto left, solve the equation for that value.
    6. If at this point the values are over-constrained, ignore the value for bottom property and solve for that value.

Block-level, regular elements in normal flow with the overflow not set to visible, Inline-block, regular elements, Floated, regular elements

Auto heights for block formatting context roots

  • If there is only inline-level children, the height will be the distance between the top of the topmost line box and the bottom of the bottommost line box.
  • If it has block-level children, the height will be the distance between the top margin-edge of the topmost block-level child box and the bottom margin-edge of the bottommost block-level child box.
  • Absolutely positioned children are being ignored and relatively positioned boxes are considered without their offset.
  • If the element has any floated descendants whose bottom margin is below the element's bottom content edge, then the height is increased in order to include those edges. Only floats that are part of the block formatting context are taken in account.

 

›› go to examples ››