The position and size of an element's box(es) are sometimes
calculated relative to a certain rectangle, called the containing
block of the element. The containing block of an element
is defined as follows:
The containing block in which the root
element lives is a rectangle with the dimensions of the viewport, anchored at the canvas
origin
for continuous media, and the page area for paged media. This
containing block is called the initial
containing block. The 'direction' property of the initial
containing block is the same as for the root element.
For other elements, if the element's position is 'relative' or 'static',
the containing block is formed by the content edge of the nearest
block-level, table cell or
inline-block ancestor box.
If the element has 'position: fixed', the containing block is
established by the viewport
in the case of continuous media or the page box in the case of paged media
If the element has 'position: absolute', the containing block is
established by the nearest ancestor with a 'position' of 'absolute', 'relative'
or 'fixed', in the following way:
In the case that the ancestor is inline-level, the containing
block depends on the 'direction' property of the
ancestor:
If the 'direction' is 'ltr', the top and left of the containing
block are the top and left content edges of the first box generated by
the ancestor, and the bottom and right are the bottom and right
content edges of the last box of the ancestor.
If the 'direction' is 'rtl', the top and right are the top and
right edges of the first box generated by the
ancestor, and the bottom and left
are the bottom and left content edges of the last box of the ancestor.
Note: This may cause the containing block's width to be
negative.
Otherwise, the containing block
is formed by the padding edge of
the ancestor.
If there is no such ancestor, the containing block is the initial
containing block.
In paged media, an absolutely positioned element is positioned
relative to its containing block ignoring any page breaks (as if the
document were continuous). The element may subsequently be broken over
several pages.
For absolutely positioned content that resolves to a position on a
page other than the page being laid out (the current page), or
resolves to a position on the current page which has already been
rendered for printing, printers may place the content
on another location on the current page,
on a subsequent page, or
may omit it.
Note that a
block-level element that is split over several pages may have a different
width on each page and that there may be device-specific limits.
Example(s):
With no positioning, the containing blocks (C.B.) in the
following document:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>Illustration of containing blocks</TITLE>
</HEAD>
<BODY id="body">
<DIV id="div1">
<P id="p1">This is text in the first paragraph...</P>
<P id="p2">This is text <EM id="em1"> in the
<STRONG id="strong1">second</STRONG> paragraph.</EM></P>
</DIV>
</BODY>
</HTML>
the percentage or 'auto' as specified or the absolute length; 'auto' if the property does not apply
This property specifies the content width of boxes generated by
block-level and replaced elements.
This property does not apply to non-replaced inline-level elements. The
content width
of a non-replaced inline element's boxes is that of the rendered
content within them (before any relative offset of
children). Recall that inline boxes flow into line boxes. The width of line boxes
is given by the their containing block, but may be
shorted by the presence of floats.
The width of a replaced element's box is intrinsic and may be scaled by the
user agent if the value of this property is different than 'auto'.
Specifies a percentage width. The percentage is calculated
with respect to the width of the generated box's
containing block.
If the containing block's width depends on this element's width, then
the resulting layout is undefined in CSS 2.1.
Note: For absolutely positioned elements whose containing block is
based on a block-level element, the percentage is calculated with
respect to the width of the padding box of that element.
This is a change from CSS1, where the percentage width was always
calculated with respect to the content box of the parent
element.
auto
The width depends on the values of other properties.
See the sections below.
The values of an element's 'width', 'margin-left', 'margin-right', 'left' and 'right' properties as used for layout
depend on the type of box generated and on each other. (The value used
for layout is sometimes referred to as the used value.) In
principle, the values used are the same as the computed values, with
'auto' replaced by some suitable value, and percentages calculated
based on the containing block, but there are exceptions. The following
situations need to be distinguished:
inline, non-replaced elements
inline, replaced elements
block-level, non-replaced elements in normal flow
block-level, replaced elements in normal flow
floating, non-replaced elements
floating, replaced elements
absolutely positioned, non-replaced elements
absolutely positioned, replaced elements
'inline-block', non-replaced elements in normal flow
'inline-block', replaced elements in normal flow
For Points 1-6 and 9-10, the values of 'left' and 'right' used for
layout are determined by the rules in section 9.4.3.
If 'width' has a computed value
of 'auto' and 'height' also has a
computed value of 'auto', the element's intrinsic width is the used value of
'width', if it has one.
If 'width' has a computed value
of 'auto' and 'height' has some
other computed value, and the replaced element has an intrinsic ratio,
or, if both 'width' and 'height' have computed values of
'auto', and the element has no intrinsic width but does have an
intrinsic height and intrinsic ratio, then the used value of 'width' is:
(intrinsic ratio) * (used height)
Otherwise, if 'width' has a
computed value of 'auto', but none of the conditions above are met,
then the used value of 'width'
becomes 300px. If 300px is too wide to fit the device, UAs should use
the width of the largest rectangle that has a 2:1 ratio and fits the
device instead.
Percentage intrinsic widths are first evaluated with respect to the
containing block's width, if that width doesn't itself depend on the
replaced element's width. If it does, then a percentage intrinsic
width on that element can't be resolved and the element is assumed to
have no intrinsic width.
If 'width' is not 'auto' and 'border-left-width' + 'padding-left' +
'width' + 'padding-right' + 'border-right-width' (plus any of
'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, for the following rules, treated
as zero.
If
all of the above have a computed value other than 'auto', the values
are said to be "over-constrained" and one of the used values will
have to be different from its computed value. If the 'direction'
property of the containing block has the value 'ltr', the specified
value of 'margin-right' is ignored and the
value is calculated so as to make the equality true. If the value of
'direction' is 'rtl', this
happens to 'margin-left' instead.
If there is exactly one value specified as 'auto', its used
value follows from the equality.
If 'width' is set to 'auto',
any other 'auto' values become '0' and 'width' follows from the resulting
equality.
If both 'margin-left' and
'margin-right' are 'auto',
their used values are equal. This horizontally centers the element
with respect to the edges of the containing block.
If 'width' is computed as
'auto', the used value is the "shrink-to-fit" width.
Calculation of the shrink-to-fit
width is similar to calculating the width of a table cell using the
automatic table layout algorithm. Roughly: calculate the preferred
width by formatting the content without breaking lines other than
where explicit line breaks occur, and also calculate the preferred
minimum width, e.g., by trying all possible line breaks.
CSS 2.1 does not define the exact algorithm. Thirdly, find the
available width: in this case, this is the width of the
containing block minus the used values of 'margin-left',
'border-left-width', 'padding-left', 'padding-right',
'border-right-width', 'margin-right', and the widths of any relevant
scroll bars.
Then the shrink-to-fit width is: min(max(preferred minimum width,
available width), preferred width).
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 'left' is the distance from the left edge
of the containing block to the left margin edge of a hypothetical box
that would have been the first box of the element if its 'position' property had been 'static'
and 'float' had been 'none'. The
value is negative if the hypothetical
box is to the left of the containing block.
The static position for 'right' is the distance from the right
edge of the containing block to the right margin edge of the same
hypothetical box as above. The value is positive if the hypothetical
box is to the left of the containing block's edge.
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, and all scrollable boxes should be assumed to
be scrolled to their origin.
The constraint that determines the used values for these
elements is:
If all three of 'left', 'width', and 'right' are 'auto': First set
any 'auto' values for 'margin-left' and 'margin-right' to 0. Then, if
the 'direction' property of the containing block is 'ltr' set 'left'
to the static position and apply rule number
three below; otherwise, set 'right' to the static position and apply rule number
one below.
If none of the three is 'auto': If both 'margin-left' and
'margin-right' are 'auto', solve the
equation under the extra constraint that the two margins get equal
values, unless this would make them negative, in which case when
direction of the containing block is 'ltr' ('rtl'), set 'margin-left'
('margin-right') to zero
and solve for 'margin-right' ('margin-left'). If one of
'margin-left' or 'margin-right' is 'auto', solve the equation for that
value. If the values are over-constrained, ignore the value for 'left'
(in case the 'direction' property of the containing block is 'rtl') or
'right' (in case 'direction' is
'ltr') and solve for that value.
Otherwise, set 'auto' values for 'margin-left' and 'margin-right'
to 0, and pick the one of the following six rules that applies.
'left' and 'width' are 'auto' and 'right' is not 'auto', then the
width is shrink-to-fit. Then solve for 'left'
'left' and 'right' are 'auto' and 'width' is not 'auto', then if
the 'direction' property of the 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').
'width' and 'right' are 'auto' and 'left' is not 'auto', then the
width is shrink-to-fit . Then solve for 'right'
'left' is 'auto', 'width' and 'right' are not 'auto', then solve for
'left'
'width' is 'auto', 'left' and 'right' are not 'auto', then solve
for 'width'
'right' is 'auto', 'left' and 'width' are not 'auto', then solve
for 'right'
Calculation of the shrink-to-fit width is similar to calculating
the width of a table cell using the automatic table layout algorithm.
Roughly: calculate the preferred width by formatting the content
without breaking lines other than where explicit line breaks occur,
and also calculate the preferred minimum width, e.g., by
trying all possible line breaks. CSS 2.1 does not define the
exact algorithm. Thirdly, calculate the available width: this
is found by solving for 'width' after setting 'left' (in case 1) or
'right' (in case 3) to 0.
Then the shrink-to-fit width is: min(max(preferred minimum width, available
width), preferred width).
If both 'left' and 'right' have the value 'auto', then if
'direction' of the containing block is 'ltr', set 'left' to
the static position; else if 'direction' is 'rtl', set 'right' to the static position.
If at this point both 'margin-left' and 'margin-right' are still 'auto',
solve the equation under the extra constraint 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' ('margin-right') to zero and solve
for 'margin-right' ('margin-left').
If at this point there is an 'auto' left, solve the equation
for that value.
If at this point the values are over-constrained, ignore the value
for either 'left' (in case the
'direction' property of the
containing block is 'rtl') or 'right' (in case 'direction' is 'ltr') and solve for
that value.
Specifies a percentage for determining the used value. The
percentage is calculated with respect to the width of the generated
box's containing block.
If the containing block's width is negative, the used value is
zero.
If the containing block's width depends on this element's width,
then the resulting layout is undefined in CSS 2.1.
none
(Only on 'max-width') No
limit on the width of the box.
If the tentative used width is greater than 'max-width', the rules above are applied again, but
this time using the computed value of 'max-width' as the computed value
for 'width'.
If the resulting width is smaller than 'min-width', the rules above are applied again, but
this time using the value of 'min-width' as the computed value
for 'width'.
However, for replaced elements with both 'width' and 'height' specified as 'auto', the
algorithm is as follows:
Select from the table the resolved height and width values for the
appropriate constraint violation. Take the max-width and
max-height as max(min, max) so that min ≤
max holds true. In this table, w and
h stand for the intrinsic width and height,
respectively.
Constraint Violation
Resolved Width
Resolved Height
none
w
h
w > max-width
max-width
max(max-width * h/w, min-height)
w < min-width
min-width
min(min-width * h/w, max-height)
h > max-height
max(max-height * w/h, min-width)
max-height
h < min-height
min(min-height * w/h, max-width)
min-height
(w > max-width) and (h > max-height), where (max-width/w ≤ max-height/h)
max-width
max(min-height, max-width * h/w)
(w > max-width) and (h > max-height), where (max-width/w > max-height/h)
max(min-width, max-height * w/h)
max-height
(w < min-width) and (h < min-height), where (min-width/w ≤ min-height/h)
min(max-width, min-height * w/h)
min-height
(w < min-width) and (h < min-height), where (min-width/w > min-height/h)
Specifies a percentage height. The percentage is calculated with
respect to the height of the generated box's containing block. If the
height of the containing block is not specified explicitly (i.e., it
depends on content height), and this element is not absolutely
positioned, the value computes to 'auto'. A percentage height
on the root element is relative to the
initial containing block.
auto
The height depends on the values of other properties.
See the prose below.
Note that the height of the containing block of an
absolutely positioned element is independent of the size of the
element itself, and thus a percentage height on such an element can
always be resolved. However, it may be that the height is not known
until elements that come later in the document have been processed.
The 'height' property doesn't
apply. The height of the content area should be based on the font, but
this specification does not specify how. A UA may, e.g., use the
em-box or the maximum ascender and descender of the font. (The latter
would ensure that glyphs with parts above or below the em-box still
fall within the content area, but leads to differently sized boxes for
different fonts; the former would ensure authors can control
background styling relative to the 'line-height', but leads to glyphs
painting outside their content area.)
Note: level 3 of CSS will probably include a property to
select which measure of the font is used for the content height.
The vertical padding, border and margin of an inline, non-replaced
box start at the top and bottom of the content area, not the 'line-height'. But only the 'line-height' is used when calculating
the height of the line box.
If more than one font is
used (this could happen when glyphs are found in different fonts), the
height of the content area is not defined by this specification.
However, we suggest that the height is chosen such that the content
area is just high enough for either (1) the em-boxes, or (2) the
maximum ascenders and descenders, of all the fonts in the
element. Note that this may be larger than any of the font sizes
involved, depending on the baseline alignment of the fonts.
10.6.2 Inline replaced elements,
block-level replaced elements in normal flow, 'inline-block' replaced
elements in normal flow and floating replaced elements
If 'height' has a computed
value of 'auto' and 'width' also
has a computed value of 'auto', the element's intrinsic height is the
used value of 'height', it has
one.
If 'height' has a computed
value of 'auto' and 'width' has
some other computed value, and the replaced element has an intrinsic
ratio, or, if both 'height' and
'width' have computed values of
'auto', and the element has no intrinsic height but does have an
intrinsic width and intrinsic ratio, then the used value of 'height' is:
(used width) / (intrinsic ratio)
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 150px. If 300px is too wide to fit the device width,
UAs should use the height of the largest rectangle that has a 2:1
ratio and fits the device width instead.
Percentage intrinsic heights are evaluated with respect to the
containing block's height, if that height is specified explicitly, or
if the replaced element is absolutely positioned. If neither of these
conditions is met, then percentage values on such replaced elements
can't be resolved and such elements are assumed to have no intrinsic
height.
For 'inline' and 'inline-block' elements, the margin box is used
when calculating the height of the line box.
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:
If it only has inline-level children, the height is 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 is the distance between the
top border-edge of the topmost block-level child box that doesn't have
margins collapsed through it
and the bottom border-edge of the bottommost block-level child box
that doesn't have margins collapsed through it. However, if the
element has a non-zero top padding and/or top border, or is the root
element, then the content
starts at the top margin edge of the topmost child. (The
first case expresses the fact that the top and bottom margins of the
element collapse with those
of the topmost and bottommost children, while in the second case the
presence of the padding/border prevents the top margins from collapsing.) Similarly, if the
element has a non-zero bottom padding and/or bottom border, then the
content ends at the bottom margin edge of the bottommost
child.
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 considered without their offset). Note
that the child box may be an anonymous block box.
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 'position' property had been
'static' and 'float' had been
'none'.
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:
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.
'top' and 'height' are 'auto' and 'bottom' is not 'auto', then the
height is based on the content, set 'auto'
values for 'margin-top' and 'margin-bottom' to 0, and solve for 'top'
'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'
'height' and 'bottom' are 'auto' and 'top' is not 'auto', then the
height is based on the content, set 'auto'
values for 'margin-top' and 'margin-bottom' to 0, and solve for
'bottom'
'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'
'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'
'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'
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.
If at this point there is only one 'auto' left, solve the equation
for that value.
If at this point the values are over-constrained, ignore the value
for 'bottom' and solve for that
value.
In certain cases (see the preceding sections), the height of an
element is computed as follows:
If it only has inline-level children, the height is 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 is 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 ignored, and relatively
positioned boxes are considered without their offset. Note that the
child box may be an anonymous block box.
In addition, if the element has any floating descendants
whose bottom margin
edge is below the bottom, then the height is increased to include
those edges. Only floats that are children of the element itself or of
descendants in the normal flow are taken into account, e.g., floats
inside absolutely positioned descendants or other floats are not.
Specifies a percentage for determining the used value.
The percentage is calculated with respect to the height of the
generated box's containing block.
If the height of the containing block is not
specified explicitly (i.e., it depends on content height), and this
element is not absolutely positioned, the
percentage value is treated as '0' (for 'min-height') or 'none'
(for 'max-height').
none
(Only on 'max-height') No limit on the height of the box.
If this tentative height is greater than 'max-height', the rules above are applied again, but
this time using the value of 'max-height' as the computed value
for 'height'.
If the resulting height is smaller than 'min-height', the rules above are applied again, but
this time using the value of 'min-height' as the computed value
for 'height'.
However, for replaced elements with both 'width' and 'height' computed as 'auto', use the
algorithm under Minimum and maximum
widths above to find the used width and height. Then apply the
rules under "Computing
heights and margins" above, using the resulting width and height as
if they were the computed values.
As described in the section on inline formatting contexts,
user agents flow inline boxes into a vertical stack of line boxes. The height of a line box
is determined as follows:
The inline boxes are aligned vertically according
to their 'vertical-align'
property.
The line box height is the distance between the uppermost
box top and the lowermost box bottom.
If the resulting height is smaller than the minimal height of line
boxes for this block, as specified by the line-height property, the height is
increased to be that minimal height.
Empty inline elements generate empty inline boxes, but these boxes
still have margins, padding, borders and a line height, and thus
influence these calculations just like elements with content.
Since the value of 'line-height' may be different
from the height of the content area there may be space above and below
rendered glyphs. The difference between the content height and the used
value of 'line-height' is
called the leading. Half the leading is called
the half-leading.
User agents center glyphs vertically in an inline box, adding
half-leading on the top and bottom. For example, if a piece of text
is '12px' high and the 'line-height' value is '14px',
2pxs of extra space should be added: 1px above and 1px below the
letters. (This applies to empty boxes as well, as if the empty box
contained an infinitesimally narrow letter.)
When the 'line-height'
value is less than the content height, the final inline box height will be
less than the font size and the rendered glyphs will "bleed" outside
the box. If such a box touches the edge of a line box, the rendered
glyphs will also "bleed" into the adjoining line box.
Although margins, borders, and padding of non-replaced elements do
not enter into the line box calculation, they are still rendered
around inline boxes. This means that if the height specified by 'line-height' is less than the
content height of contained boxes, backgrounds and colors of padding
and borders may "bleed" into adjoining line boxes. User agents should
render the boxes in document order. This will cause the borders on
subsequent lines to paint over the borders and text of previous lines.
On an inline-level element, 'line-height'
specifies the height that is used in the calculation of the line box
height (except for inline replaced elements, where the
height of the box is given by the 'height' property).
Values for this property have the following meanings:
normal
Tells user agents to set the used
value to a "reasonable" value based on the font of the element. The
value has the same meaning as <number>. We recommend a
used value for 'normal' between 1.0 to 1.2. The computed value is 'normal'.
The used value of the property is this number multiplied by the
element's font size. Negative values are illegal. The computed value is the same as
the specified value.
The computed value of the
property is this percentage multiplied by the element's
computed font size. Negative values are illegal.
Example(s):
The three rules in the example below have the same resultant line height:
div { line-height: 1.2; font-size: 10pt } /* number */
div { line-height: 1.2em; font-size: 10pt } /* length */
div { line-height: 120%; font-size: 10pt } /* percentage */
When an element contains text that is rendered
in more than one font, user agents may determine the 'line-height' value according to
the largest font size.
Generally, when there is only one value of 'line-height' for all inline
boxes in a paragraph (and no tall images), the above will ensure that
baselines of successive lines are exactly 'line-height' apart. This is
important when columns of text in different fonts have to be aligned,
for example in a table.
This property affects the vertical positioning inside a line box of
the boxes generated by an inline-level element.
Note. Values of this property have
slightly different meanings in the context of tables.
Please consult the section on
table height algorithms for details.
Align the baseline of the box with the baseline of
the parent box. If the box doesn't have a baseline, align the
bottom margin edge with the parent's baseline.
middle
Align the vertical midpoint of the box with the baseline
of the parent box plus half the x-height of the parent.
sub
Lower the baseline of the box to the proper position for
subscripts of the parent's box. (This value has no effect on the
font size of the element's text.)
super
Raise the baseline of the box to the proper position for
superscripts of the parent's box. (This value has no effect on the
font size of the element's text.)
text-top
Align the top of the box with the top of the parent's content
area (see 10.6.1).
text-bottom
Align the bottom of the box with the bottom of the parent's
content area (see 10.6.1).
Raise (positive value) or lower (negative value) the box
by this distance (a percentage of the 'line-height' value).
The value '0%' means the same as 'baseline'.
Raise (positive value) or lower (negative value) the box
by this distance.
The value '0cm' means the same as 'baseline'.
The following values align the element relative to the line box.
Since the element may have children aligned relative to it (which in
turn may have descendants aligned relative to them), these values use
the bounds of the aligned subtree. The aligned subtree of
an inline element contains that element and the aligned subtrees of
all children inline elements whose computed 'vertical-align' value is
not 'top' or 'bottom'. The top of the aligned subtree is the highest
of the tops of the boxes in the subtree, and the bottom is analogous.
top
Align the top of the aligned subtree with the top of the line box.
bottom
Align the bottom of the aligned subtree with the bottom of the
line box.
The baseline of an 'inline-table' is the baseline of the first row
of the table.
A UA should use the baseline of the last line box in the normal
flow in the element as the baseline of an 'inline-block', or the
element's bottom margin edge, if there is none.
