In the following sections, these terms are used:
Similar to calculating the width of a table cell using the automatic table layout algorithm. In general, the user agent attempts to find the minimum element width that will contain the content and wrap to multiple lines only if wrapping cannot be avoided.
The place where an element’s edge would have been placed if its position
were static
.
The equation that governs the layout of these elements is:
left + margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right + right = width of containing block
The steps used to determine layout are:
If all of left
, width
, and right
are auto
, first reset any auto
values for margin-left
and margin-right
to 0
. Then, if direction
is ltr
, set left
to the static position and apply the rule given in step 3c. Otherwise, set right
to the static position and apply the rule given in step 3a.
If none of left
, width
, and right
is auto
, pick the rule that applies from the following list:
If both margin-left
and margin-right
are set to auto
, solve the equation under the additional constraint that the two margins get equal values.
If only one of margin-left
or margin-right
is set to auto
, solve the equation for that value.
If the values are overconstrained (none is set to auto
), ignore the value for left
if direction
is rtl
(ignore right
if direction
is ltr
) and solve for that value.
If some of left
, width
, and right
are auto
, but others are not, reset any auto
values for margin-left
and margin-right
to 0
. From the following list, pick the one rule that applies:
If left
and width
are auto
and right
is not, then the width is shrink-to-fit. Solve the equation for left
.
If left
and right
are auto
and width
is not, then if direction
is ltr
, set left
to the static position (otherwise, set right
to the static position). Solve the equation for left
(if direction is rtl
) or right
(if direction
is ltr
).
If width
and right
are auto
and left
is not, then the width is shrink-to-fit. Solve the equation for right
.
If left
is auto
and width
and right
are not, solve the equation for left
.
If width
is auto
and left
and right
are not, solve the equation for width
.
If right
is auto
and left
and width
are not, solve the equation for right
.
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 = height of containing block
The steps used to determine layout are:
If all of top
, height
, and bottom
are auto
, set top
to the static position and apply the rule given in step 3c.
If none of top
, height
, and bottom
is auto
, pick the one rule that applies from the following list:
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.
If only one of margin-top
or margin-bottom
is set to auto
, solve the equation for that value.
If the values are overconstrained (none is set to auto
), ignore the value for bottom
and solve for that value.
If some of top
, height
, and bottom
are auto
, but others are not, pick the one rule that applies from the following list:
If top
and height
are auto
and bottom
is not, then 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
.
If top
and bottom
are auto
and height
is not, then set top
to the static position. Reset any auto
values for margin-top
and margin-bottom
to 0
and solve the equation for bottom
.
If height
and bottom
are auto
and top
is not, then 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 bottom
.
If top
is auto
and height
and bottom
are not, reset any auto
values for margin-top
and margin-bottom
to 0
and solve the equation for top
.
If height
is auto
and top
and bottom
are not, reset any auto
values for margin-top
and margin-bottom
to 0
and solve the equation for height
.
If bottom
is auto
and top
and height
are not, reset any auto
values for margin-top
and margin-bottom
to 0
and solve the equation for bottom
.
The behaviors that go into placing and sizing replaced elements are most easily expressed as a series of rules to be taken one after the other. These rules state:
If width
is set to auto
, the computed value of width
is determined by the intrinsic width of the element’s content. Thus, the width of an image 50 pixels wide is computed to be 50px
. If width
is explicitly declared (that is, something such as 100px
or 50%
), then the width is set to that value.
If left
has the value auto
in a left-to-right language, replace auto
with the static position. In right-to-left languages, replace an auto
value for right
with the static position.
If either left
or right
is still auto
(in other words, it hasn’t been replaced in a previous step), replace any auto
value in margin-left
or margin-right
with 0
.
If at this point both margin-left
and margin-right
are still defined to be auto
, set them to be equal, thus centering the element in its containing block.
After all that, if there is only one auto
value left, change it to equal the remainder of the equation.
The behaviors that go into placing and sizing replaced elements are most easily expressed as a series of rules to be taken one after the other. These state:
If height
is set to auto
, the computed value of height
is determined by the intrinsic height of the element’s content. Thus, the height of an image 50 pixels tall is computed to be 50px
. If height
is explicitly declared (that is, something such as 100px
or 50%
), then the height is set to that value.
If top
has the value auto
, replace the value with the replaced element’s static position.
If bottom
has a value of auto
, replace any auto
value on margin-top
or margin-bottom
with 0
.
If at this point both margin-top
and margin-bottom
are still defined to be auto
, set them to be equal, thus centering the element in its containing block.
After all that, if there is only one auto
value left, change it to equal the remainder of the equation.
18.223.20.57