HTML and CSS Reference
2. If both left and right are set to auto , then if direction is ltr , set left to the static
left position. If direction is rtl , set right to the static right position.
3. If either or both of left and right are set to auto , reset any auto values for margin-
left and margin-right to 0 .
4. If neither left nor right is set to auto and both margin-left and margin-right are set
to auto , solve the equation under the additional constraint that the two margins get equal
5. If the values are overconstrained (none is set to auto ), ignore the value for left if dir-
ection is rtl (ignore right if direction is ltr ) and solve for that value.
Vertical layout of absolutely positioned elements
The equation that governs the layout of these elements is:
top + margin-top + border-top-width + padding-top + height
+ padding-bottom + border-bottom-width + margin-bottom +
bottom + horizontal scrollbar height (if any) =
height of containing block
The height of any horizontal scrollbar is determined by the user agent and cannot be affected
For nonreplacedelements, the steps used to determine vertical layout are:
1. If all of top , height , and bottom are auto , set top to the static position and apply the rule
given in step 3c.
2. If none of top , height , and bottom is auto , pick the one rule that applies from the fol-
a. If both margin-top and margin-bottom are set to auto , solve the equation under the
additional constraint that the two margins get equal values.
b. If only one of margin-top or margin-bottom is set to auto , solve the equation for
c. If the values are overconstrained (none is set to auto ), ignore the value for bottom
and solve for that value.
3. If some of top , height , and bottom are auto , but others are not, pick the one rule that
applies from the following list:
a. If top and height are auto and bottom is not, the height is based on the element's
content (as it would be in the static flow). Reset any auto values for margin-top and
margin-bottom to 0 and solve the equation for top .