The real (used) values of an element's width 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:

  • Inline, replaced (images, objects...) elements.
  • Block-level, regular elements in normal flow.
  • Block-level, replaced elements in normal flow.
  • Floated, regular elements in normal flow.
  • Floated, replaced elements.
  • Absolutely positioned, regular elements.
  • Absolutely positioned, replaced elements.
  • Inline-block, regular elements in normal flow.
  • Inline-block, replaced elements in normal flow.

Inline, regular elements

  • The width property is ignored and the computed value of auto for margin-left or margin-right properties becomes a used value of "0".

Inline, replaced (images, objects...) elements

  • The computed value of auto for margin-left or margin-right properties becomes a used value of "0".
  • If the values width and height are both set to auto and the element has its intrinsic width, the intrinsic width becomes its used value of width.
  • If the values width and height are both set to auto and the element has no intrinsic width but it has intrinsic height and intrinsic ratio; or if the element has the width value set to auto with the height value being something else, and the element has an intrinsic ration; then the used value will be result of (used height) * (intrinsic ratio).
  • If the values width and height are both set to auto and the element has intrinsic ratio but no intrinsic width or height, then the used value will be undefined (in CSS 2.1 at least).
  • If widthproperty has the computed value set to auto and the element has intrinsic width, the intrinsic width becomes its used value of width.
  • Otherwise, if widthproperty has the computed value set to auto but no other conditions are met, the used value of width becomes "300px" and if that is too wide to fit, the width of the largest rectangle that has the ratio "2:1" and still fits the container should be used.

Block-level, regular elements in normal flow

  • The width of the containing block is equal to the sum of margin-left, border-left-width, padding-left, width, padding-right, border-right-width and margin-right.
  • If the width property is not set to auto and border-left-width + padding-left + width + padding-right + border-right-width (plus any margin-left or margin-right that are not auto) is larger than the width of the containing block, then any auto values for margin-left or margin-right are treated as "zero".
  • If the above calculation has the computed value other then auto, the values become over-constrained and one of the used value will have to be modified from its computed value. That depends on the direction of the content; therefore if the direction property is set to ltr, the computed value of the margin-right will be ignored and calculated so it fits the equation; otherwise if the direction is set to rtl, the value of margin-left will be modified.
  • If at least one property above is set to auto, its used value will be modified to fit the equation.
  • If width is set to auto, any other auto value becomes "0" and width gets calculated to fit the equation.
  • If both margin-left and margin-right properties are auto, their used value become equal and the horizontal alignment becomes the "center" of the containing block.

Block-level, replaced elements in normal flow

  • The used value of width is determined as for the same as with the Inline, regular elements and the rules from Block-level, regular elements in normal flow are applied to determine the margins.

Floated, regular elements in normal flow

  • If the margin-left or margin-right properties are computed as auto, their used value is "0".
  • If width is computed as auto, the used value will be the "shrink-to-fit" method based width.

Floated, replaced elements

  • If the properties margin-left or margin-right are computed as auto, their used value is "0". The used value of width is determined by the rules from Inline, replaced (images, objects...) elements.

Absolutely positioned, regular elements

  • The width of the containing block is equal to the sum of left, margin-left, border-left-width, padding-left, width, padding-right, border-right-width, margin-right and right.
  • If all three of left, width and right are set to auto, any auto values for margin-left and margin-right will be set to "0"; if the direction is ltr, set left to the static position and apply rule #3 from below, otherwise set right to the static position and apply rule #1 from below.
  • If none of the three is set to auto, if both margin-left and margin-right are auto, modify the equation so that those two margins get equal values; if the margins are negative then, if the direction is ltr, set margin-left to "0" or, if the direction is rtl set margin-right to "0".
  • If one of margin-left or margin-right is auto the equation will be modified for that value.
  • If the values are over-constrained, ignore the value for left if direction is ltr or the value for right id the direction is rtl.
  • Otherwise, set auto values for margin-left and margin-right to "0" and pick one of the following rules:
    1. Properties left and width are auto and property right is not auto, then the width is shrink-to-fit; then solve for left.
    2. Properties left and right are auto and property width is not auto, then if the direction property of the element establishing the static-position containing block is ltr set left to the static position, otherwise set right to the static position; then solve for left (if direction is rtl) or right (if direction is ltr).
    3. Properties width and right are auto and property left is not auto, then the width is shrink-to-fit; then solve for right.
    4. Property left is auto, properties width and right are not auto, then solve for left.
    5. Property width is auto, properties left and right are not auto, then solve for width.
    6. Property right is auto, properties left and width are not auto, then solve for right.

Absolutely positioned, replaced elements

  • The width of the containing block is equal to the sum of left, margin-left, border-left-width, padding-left, width, padding-right, border-right-width, margin-right and right.
  • The following rules apply:
    1. The used value of width property is determined as for Inline replaced elements. If margin-left or margin-right properties is specified as auto its used value is determined by the rules below.
    2. If both left and right properties have the value auto, then if the direction property of the element establishing the static-position containing block is ltr, set left property to the static position; else if direction is rtl, set right property to the static position.
    3. If left or right properties are auto, replace any auto on margin-left or margin-right properties with "0".
    4. If at this point both margin-left and margin-right properties are still auto, solve the equation so that the two margins must get equal values, unless this would make them negative, in which case when the direction of the containing block is ltr (rtl), set margin-left property (margin-right property) to zero and solve for margin-right property (margin-left property).
    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 either left property (in case the direction property of the containing block is rtl) or right property (in case direction property is ltr) and solve for that value.

Inline-block, regular elements in normal flow

  • If the property width is set to auto, the used value is calculated by shrink-to-fit method in the same manner as with the floating elements.
  • The computed value of auto for margin-left and margin-right will become "0".

Inline-block, replaced elements in normal flow

  • Resolves in the same way as Inline, replaced (images, objects...) elements does.

 

›› go to examples ››