Contents
The position and size of an element's box(es) are sometimes computed relative to a certain rectangle, called the containing block of the element. The containing block of an element is defined as follows:
If there is no such ancestor, the content edge of the root element's box establishescontaining block is the initial
containing block.
With no positioning, the containing blocks (C.B.) in the following document:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//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>
are established as follows:
| For box generated by | C.B. is established by |
|---|---|
| | initial C.B. (UA-dependent) |
| body | html |
| div1 | body |
| p1 | div1 |
| p2 | div1 |
| em1 | p2 |
| strong1 | p2 |
If we position "div1":
#div1 { position: absolute; left: 50px; top: 50px }
its containing block is no longer "body"; it becomes the initial containing block (since there are no other positioned ancestor boxes).
If we position "em1" as well:
#div1 { position: absolute; left: 50px; top: 50px }
#em1 { position: absolute; left: 100px; top: 100px }
the table of containing blocks becomes:
| For box generated by | C.B. is established by |
|---|---|
| | initial C.B. (UA-dependent) |
| body | html |
| div1 | initial C.B. |
| p1 | div1 |
| p2 | div1 |
| em1 | div1 |
| strong1 | em1 |
By positioning "em1", its containing block becomes the nearest positioned ancestor box (i.e., that generated by "div1").
| Value: | <length> | <percentage> | auto | inherit |
| Initial: | auto |
| Applies to: | all elements but non-replaced inline elements, table rows, and row groups |
| Inherited: | no |
| Percentages: | refer to width of containing block |
| Media: | visual |
| Computed value: | 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'.
Values have the following meanings:
Negative values for 'width' are illegal.
For example, the following rule fixes the content width of paragraphs at 100 pixels:
p { width: 100px }
The computed values of an element's 'width', 'margin-left', 'margin-right', 'left' and 'right' properties depend on the type of box generated and on each other. In principle, the computed values are the same as the specified values, with 'auto' replaced by some suitable value, but there are exceptions. The following situations need to be distinguished:
Points 1-6 and 9-10 include relative positioning.
The 'width' property does not apply. A specified value of 'auto' for 'left', 'right', 'margin-left' or 'margin-right' becomes a computed value of '0'.
A specified value of 'auto' for 'left', 'right', 'margin-left' or 'margin-right' becomes a computed
value of '0'. If 'width' has a
specified value of 'auto' for 'width' givesand 'height' also has a specified value of
'auto', the element's intrinsic
width asis the computed value.value of 'width'. If 'width' has a specified value of 'auto'
and 'height' has some other
specified value, then the computed value of 'width' is:
(intrinsic width) * ( (computed height) / (intrinsic height) )
If 'left' or 'right' are given as 'auto', their computed value is 0. The following constraints must hold between the other properties:
'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block
(If the border style is 'none', use '0' as the border width.) If
all of the above have a specified value other than 'auto', the values
are said to be "over-constrained" and one of the computed values will
have to be different from its specified value. If the 'direction'
property has the value 'ltr', the specified value of 'margin-right' is ignored and the
value is computed so as to make the equality true. If the value of
'direction' is 'ltr','rtl', this
happens to 'margin-left' instead.
If there is exactly one value specified as 'auto', its computed 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 computed values are equal. This horizontally centers the element with respect to the edges of the containing block.
If 'left' or 'right' are 'auto', their computed value
is 0. IfThe computed value of
'width' is specifieddetermined
as 'auto', its value is the element's intrinsic width.for inline replaced
elements.
If one of the margins is 'auto', its computed value is given by the
constraints above. Furthermore, if
both margins are 'auto', their computed values are equal.
If 'left', 'right', 'width' ,'margin-left', or 'margin-right' are specified as
'auto', their computed value is '0'.
10.3.6 Floating, replaced elementsIf 'left' , 'right' , 'margin-left' or 'margin-right' are'width' is specified as
'auto', theirthe computed value is '0'. If 'width' is 'auto', its value isthe element's intrinsic"shrink-to-fit" width.
10.3.7 Absolutely positioned, non-replaced elementsCalculation of the constraint that determinesshrink-to-fit
width is similar to computing the computed values for these elements is: 'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' =width of containing block (Ifa table cell using the
border style is 'none', use '0' asautomatic table layout algorithm. Roughly: calculate the border width.)preferred
width by formatting the solution tocontent 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, compute the
available width: in this case, this constraintis reached through a numberthe width of substitutions inthe
following order:containing block minus 'left',
'right', 'margin-left' and 'margin-right'. (Omit 'left' and
'right' if they do not apply to this element.)
Then the shrink-to-fit width is: min(max(preferred minimum width, available width), preferred width).
If 'left' has, 'right', 'margin-left' or 'margin-right' are specified as
'auto', their computed value is '0'.
The computed value 'auto' while 'direction'of
'width' is determined
as for inline 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:
If 'width' is 'auto', replace any remaining 'auto' for 'left' or 'right' with '0'. If 'left' , 'right' or 'width'But rather than actually computing that hypothetical box, user
agents are (still) 'auto', replace any 'auto' on 'margin-left' or 'margin-right' with '0'. Iffree to make a guess at this point both 'margin-left' and 'margin-right' are still 'auto', solve the equation underits probable position.
The extraconstraint that determines the two margins must get equal values. If at this point there is onlycomputed values for these
elements is:
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
If all three of 'left', 'width', and 'right' are 'auto': if
'direction' 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 'auto' left,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. If one of
'margin-left' or 'margin-right' is 'auto', solve the equation for that
value. If at this pointthe values are over-constrained, ignore the value for either'left'
(in case 'direction' is 'rtl') or 'right' (in case 'direction' is
'ltr') and solve for that value.
10.3.8 Absolutely positioned, replaced elements This situation is similarOtherwise, set 'auto' values for 'margin-left' and 'margin-right'
to 0, and pick the previous one, except thatone of the element has an intrinsic width.following six rules that applies.
Calculation of the containing blockshrink-to-fit width is similar to computing the
left margin edgewidth of a hypothetical box that would have beentable cell using the first box ofautomatic table layout algorithm.
Roughly: calculate the element if its 'position' property had been 'static'. (But ratherpreferred width by formatting the content
without breaking lines other than actually computing that box, user agents are free to make a guess at its probable position.)where explicit line breaks occur,
and also calculate the valuepreferred minimum width, e.g., by
trying all possible line breaks. CSS 2.1 does not define the
exact algorithm. Thirdly, compute the available width: this
is negative ifcomputed by solving for 'width' after setting 'left' (in case 1) or
'right (in case 3) to 0.
Then the hypothetical boxshrink-to-fit width is: min(max(preferred minimum width, available
width), preferred width).
This situation is similar to the leftprevious one, except that the
element has an intrinsic width. The
sequence of substitutions is now:
If 'width' is 'auto', the computed value is the shrink-to-fit width as for floating elements.
A specified value of 'auto' for 'left', 'right', 'margin-left' or 'margin-right' becomes a computed value of '0'.
Exactly as inline replaced elements.
| Value: | <length> | <percentage> | inherit |
| Initial: | |
| Applies to: | all elements except non-replaced inline elements and table elements |
| Inherited: | no |
| Percentages: | refer to width of containing block |
| Media: | visual |
| Computed value: | absolute length |
| Value: | <length> | <percentage> | none | inherit |
| Initial: | none |
| Applies to: | all elements except non-replaced inline elements and table elements |
| Inherited: | no |
| Percentages: | refer to width of containing block |
| Media: | visual |
| Computed value: | absolute length or 'none' |
These two properties allow authors to constrain box widths to a certain range. Values have the following meanings:
The following algorithm describes how the two properties influence the computed value of the 'width' property:
The user agent may define a non-negative minimum value for the 'min-width' property, which may vary from element to element and even depend on other properties. If 'min-width' goes below this limit, either because it was set explicitly, or because it was 'auto' and the rules below would make it too small, the user agent may use the minimum value as the computed value.
| Value: | <length> | <percentage> | auto | inherit |
| Initial: | auto |
| Applies to: | all elements but non-replaced inline elements, table columns, and column groups |
| Inherited: | no |
| Percentages: | see prose |
| Media: | visual |
| Computed value: | absolute length; 'auto' if the property does not apply |
This property specifies the content height of boxes generated
by block-levelblock-level, inline-block and replaced elements.
This property does not apply to non-replaced inline-level elements. The height of a non-replaced inline element's boxes is given by the element's (possibly inherited) 'line-height' value.
Values have the following meanings:
A UA may compute a percentage height on the root element relative to the viewport.
Negative values for 'height' are illegal.
For example, the following rule fixessets the content height of paragraphs
to 100 pixels:
p { height: 100px }
Paragraphs that require more than 100 pixelsof which the height of the contents exceeds 100 pixels
will overflow according to the
'overflow' property.
For computing the values of 'top', 'margin-top', 'height', 'margin-bottom', and 'bottom' a distinction must be made between various kinds of boxes:
Points 1-6 and 9-10 include relative positioning.
If 'top' , 'bottom' , 'margin-top' ,or 'margin-bottom''bottom' are 'auto',
their computed value is 0. The 'height' property doesn't apply, but0.
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.)
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 to compute 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 boxcontent area is givennot defined by this specification.
However, we suggest that the 'line-height' property.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.
If 'top', 'bottom', 'margin-top', or 'margin-bottom' are 'auto',
their computed value is 0. If 'height' ishas a specified value of
'auto' and 'width' also has a
specified value of 'auto', the element's intrinsic height is the
computed value isof 'height'. If
'height' has a specified value of
'auto' and 'width' has some other
specified value, then the intrinsic height.computed value of 'height' is:
(intrinsic height) * ( (computed width) / (intrinsic width) )
If 'top', 'bottom', 'margin-top', or 'margin-bottom' are 'auto',
their computed value is 0. If 'height' is 'auto', the height depends
on whether the element has any block-level children.children and whether it has
padding or borders.
If it only has inline-level children, the height is fromthe distance
between the top of the topmost line box toand the bottom of the
bottommost line box.
If it has block-level children, itthe height is the distance frombetween
the top border-edge of the topmost block-level child box, tobox and the
bottom border-edge of the bottommost block-level child box. However,
if the element has a non-zero top padding and/or top border, 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 border style is 'none', use '0' aspurposes of this section and the border width.)next, the solutionterm "static
position" (of an element) refers, roughly, to this constraint is reached through a number of substitutionsthe position an element
would have had in the following order: If 'top' hasnormal flow. More precisely, the value 'auto' replace it withstatic 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'.
(ButThe value is negative if the hypothetical box is above the containing
block.
But rather than actually computing that hypothetical box, user
agents are free to make a guess at its probable position.)position.
For absolutely positioned elements, the value is negativevertical 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 hypothetical box is abovestatic position and apply rule number three below.
If none of the containing block.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.
This situation is similar to the previous one, except that the element has an intrinsic height. The sequence of substitutions is now:
It is sometimes useful to constrain the height of elements to a certain range. Two properties offer this functionality:
| Value: | <length> | <percentage> | inherit |
| Initial: | 0 |
| Applies to: | all elements except non-replaced inline elements and table elements |
| Inherited: | no |
| Percentages: | refer to height of containing block |
| Media: | visual |
| Computed value: | absolute length |
| Value: | <length> | <percentage> | none | inherit |
| Initial: | none |
| Applies to: | all elements except non-replaced inline elements and table elements |
| Inherited: | no |
| Percentages: | refer to height of containing block |
| Media: | visual |
| Computed value: | absolute length or 'none' |
These two properties allow authors to constrain box heights to a certain range. Values have the following meanings:
The following algorithm describes how the two properties influence the computed value of the 'height' property:
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:
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. Note that if all the boxes in the line box are aligned along their bottoms, the line box will be exactly the height of the tallest box. If, however, thethese boxes
are aligned alongstill have margins, padding, borders and a common baseline, theline box top and bottom may not touch the topheight, and bottom of the tallest box.thus
influence these calculations just like elements with content.
Since the heightvalue of an inline box'line-height' may be different
from the font sizeheight of text inthe box (e.g., 'line-height' > 1em),content area there may be space above and below
rendered glyphs. The difference between the font sizecontent height and the computed
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 '12pt' high and the 'line-height' value is '14pt', 2pts of extra space should be added: 1pt above and 1pt below the letters. (This applies to empty boxes as well, as if the empty box contained an infinitely narrow letter.)
When the 'line-height'
value is less than the font size,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 adjacent line box.
Although margins, borders, and padding of non-replaced elements do
not enter into inline box height calculation (and thusthe line box calculation),calculation, they are still rendered
around inline boxes. This means that if the height of a line boxspecified by 'line-height' is shorterless than the
outer edgescontent height of the boxes it contains,contained boxes, backgrounds and colors of padding
and borders may "bleed" into adjacent line boxes. However, in this case, some user agents may use the
line box to "clip" the border and padding areas (i.e., not render
them). 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.
| Value: | normal | <number> | <length> | <percentage> | inherit |
| Initial: | normal |
| Applies to: | all elements |
| Inherited: | yes |
| Percentages: | refer to the font size of the element itself |
| Media: | visual |
| Computed value: | for <length> and <percentage> the absolute value; otherwise as specified |
If the property is set on a block-level element whose content
is composed of inline-level
elements, it specifies the minimal height of line boxes
within the element. The minimum height consist of a minimum height above
the block's baseline and a minimum depth below it, exactly as if each
generatedline box starts with a zero-width inline box.box with the
block's font and line height properties (what TEX calls a
"strut").
If the property is set on an inline-level element, it
specifies the exactheight that is used in the calculation of each box generated bythe element.line box
height (except for inline replaced elements, where the
height of the box is given by the 'height' property.)property).
Values for this property have the following meanings:
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 should 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.
| Value: | baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit |
| Initial: | baseline |
| Applies to: | inline-level and 'table-cell' elements |
| Inherited: | no |
| Percentages: | refer to the 'line-height' of the element itself |
| Media: | visual |
| Computed value: | for <percentage> and <length> the absolute length, otherwise as specified |
This property affects the vertical positioning inside a line box of
the boxes generated by an inline-level element. The following values
only have meaning with respect to a parent inline-level element, or to
a parent block-level element, if that element generates anonymous inline boxes ; they have no effect if no such parent exists.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.