If ’margin-top’, or ’margin-bottom’ are ’auto’, their used value is 0.
If ’height’ and ’width’ both have computed values of ’auto’ and the element also has an intrinsic height, then that intrinsic height is the used value of ’height’.
Otherwise, if ’height’ has a computed value of ’auto’, and the element has an intrinsic ratio then the used value of ’height’ is:
(used width) / (intrinsic ratio)
Otherwise, if ’height’ has a computed value of ’auto’, and the element has an intrinsic height, then that intrinsic height is the used value of ’height’.
Otherwise, if ’height’ has a computed value of ’auto’, but none of the conditions above are met, then the used value of ’height’ must be set to the height of the largest rectangle that has a 2:1 ratio, has a height not greater than 150px, and has a width not greater than the device width.
10.6.3 Block-level non-replaced elements in normal flow when
’overflow’ computes to ’visible’
This section also applies to block-level non-replaced elements in normal flow when ’overflow’ does not compute to ’visible’ but has been propagated to the viewport.
If ’margin-top’, or ’margin-bottom’ are ’auto’, their used value is 0. If ’height’ is ’auto’, the height depends on whether the element has any block-level children and whether it has padding or borders:
The element’s height is the distance from its top content edge to the first applica- ble of the following:
1. the bottom edge of the last line box, if the box establishes a 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
Only children in the normal flow are taken into account (i.e., floating boxes and absolutely positioned boxes are ignored, and relatively positioned boxes are consid- ered without their offset). Note that the child box may be an anonymous block box. [p. 129]
10.6.4 Absolutely positioned, non-replaced elements
For the purposes of this section and the next, the term "static position" (of an element) refers, roughly, to the position an element would have had in the normal flow. More precisely, the static position for ’top’ is the distance from the top edge of the containing block to the top margin edge of a hypothetical box that would have been the first box of the element if its specified ’position’ value had been ’static’ and its specified ’float’ had been ’none’ and its specified ’clear’ had been ’none’. (Note that due to the rules in section 9.7 [p. 153] this might require also assuming a differ- ent computed value for ’display’.) The value is negative if the hypothetical box is above the containing block.But rather than actually calculating the dimensions of that hypothetical box, user agents are free to make a guess at its probable position.
For the purposes of calculating the static position, the containing block of fixed positioned elements is the initial containing block instead of the viewport.
For absolutely positioned elements, the used values of the vertical dimensions must satisfy this constraint:
’top’ + ’margin-top’ + ’border-top-width’ + ’padding-top’ + ’height’ +
’padding-bottom’ + ’border-bottom-width’ + ’margin-bottom’ + ’bottom’ = height of containing block
If all three of ’top’, ’height’, and ’bottom’ are auto, set ’top’ to the static position and apply rule number three below.
If none of the three are ’auto’: If both ’margin-top’ and ’margin-bottom’ are ’auto’, solve the equation under the extra constraint that the two margins get equal values. If one of ’margin-top’ or ’margin-bottom’ is ’auto’, solve the equation for that value. If the values are over-constrained, ignore the value for ’bottom’ and solve for that value.
Otherwise, pick the one of the following six rules that applies.
1. ’top’ and ’height’ are ’auto’ and ’bottom’ is not ’auto’, then the height is based on the content per 10.6.7 [p. 187] , set ’auto’ values for ’margin-top’ and
’margin-bottom’ to 0, and solve for ’top’
2. ’top’ and ’bottom’ are ’auto’ and ’height’ is not ’auto’, then set ’top’ to the static position, set ’auto’ values for ’margin-top’ and ’margin-bottom’ to 0, and solve for ’bottom’
4. ’top’ is ’auto’, ’height’ and ’bottom’ are not ’auto’, then set ’auto’ values for ’margin-top’ and ’margin-bottom’ to 0, and solve for ’top’
5. ’height’ is ’auto’, ’top’ and ’bottom’ are not ’auto’, then ’auto’ values for ’margin-top’ and ’margin-bottom’ are set to 0 and solve for ’height’
6. ’bottom’ is ’auto’, ’top’ and ’height’ are not ’auto’, then set ’auto’ values for ’margin-top’ and ’margin-bottom’ to 0 and solve for ’bottom’
10.6.5 Absolutely positioned, replaced elements
This situation is similar to the previous one, except that the element has an intrinsic [p. 45] height. The sequence of substitutions is now:
1. The used value of ’height’ is determined as for inline replaced elements [p. 185] . If ’margin-top’ or ’margin-bottom’ is specified as ’auto’ its used value is deter- mined by the rules below.
2. If both ’top’ and ’bottom’ have the value ’auto’, replace ’top’ with the element’s static position [p. 177] .
3. If ’bottom’ is ’auto’, replace any ’auto’ on ’margin-top’ or ’margin-bottom’ with ’0’. 4. If at this point both ’margin-top’ and ’margin-bottom’ are still ’auto’, solve the
equation under the extra constraint that the two margins must get equal values. 5. If at this point there is only one ’auto’ left, solve the equation for that value. 6. If at this point the values are over-constrained, ignore the value for ’bottom’ and
solve for that value.
10.6.6 Complicated cases
This section applies to:Block-level, non-replaced elements in normal flow when ’overflow’ does not compute to ’visible’ (except if the ’overflow’ property’s value has been propa- gated to the viewport).
’Inline-block’, non-replaced elements. Floating, non-replaced elements.
If ’margin-top’, or ’margin-bottom’ are ’auto’, their used value is 0. If ’height’ is ’auto’, the height depends on the element’s descendants per 10.6.7 [p. 187] .
For ’inline-block’ elements, the margin box is used when calculating the height of the line box.