Contents
The position and size of an element's box(es) are sometimescalculated relative to a certain rectangle, called the
If there is no such ancestor, the containing block is the initialcontaining block.
In paged media, an absolutely positioned element is positionedrelative to its containing block ignoring any page breaks (as if thedocument were continuous). The element may subsequently be broken overseveral pages.
For absolutely positioned content that resolves to a position on apage other than the page being laid out (the current page), orresolves to a position on the current page which has already beenrendered for printing, printers may place the content
Note that ablock-level element that is split over several pages may have a differentwidth on each page and that there may be device-specific limits.
Example(s):
With no positioning, the containing blocks (C.B.) in thefollowing document:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"><HTML> <HEAD> <TITLE>Illustration of containing blocks</TITLE> </HEAD> <BODY> <DIV> <P>This is text in the first paragraph...</P> <P>This is text <EM> in the <STRONG>second</STRONG> paragraph.</EM></P> </DIV> </BODY></HTML>
are established as follows:
For box generated by | C.B. is established by |
---|---|
html | 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 becomesthe initial containing block (since there are noother 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 |
---|---|
html | 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 becomesthe nearest positioned ancestor box (i.e., that generatedby "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: | the percentage or 'auto' as specified or the absolute length |
This property specifies thecontent width of boxes.
This property does not apply to non-replacedinline elements. Thecontent widthof a non-replaced inline element's boxes is that of the renderedcontent within them (before any relative offset ofchildren). Recall that inline boxes flow intoline boxes. The width of line boxesis given by the theircontaining block, but may beshorted by the presence offloats.
Values have the following meanings:
Negative values for'width' areillegal.
Example(s):
For example, the following rule fixes the content width of paragraphsat 100 pixels:
p { width: 100px }
The values of an element's
For Points 1-6 and 9-10, the values of 'left' and 'right' in thecase of relatively positioned elements are determined by the rules insection 9.4.3.
Note. The used value of 'width'calculated below is a tentative value, and may have to be calculatedmultiple times, depending on
The'width' property does notapply. A computed value of 'auto' for
A computed value of 'auto' for
If'height' and
If'height' and
(used height) * (intrinsic ratio)
If 'height' and'width' bothhave computed values of 'auto' and the element has an intrinsic ratiobut no intrinsic height or width, then the used value of 'width' isundefined in CSS 2.1.However, it is suggested that, if the containing block's widthdoes not itself depend on the replaced element's width, then the usedvalue of 'width' is calculated from the constraint equation used forblock-level, non-replaced elements in normal flow.
Otherwise, if'width' has acomputed value of 'auto', and the element has an intrinsic width, thenthat intrinsic width is the used value of
Otherwise, if'width' has acomputed 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 usethe width of the largest rectangle that has a 2:1 ratio and fits thedevice instead.
The followingconstraints must holdamong the used values of the other properties:
'margin-left' +
'border-left-width' +'padding-left' +'width' +'padding-right' +'border-right-width' +'margin-right' = width ofcontaining block
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 thanthe width of the containing block, then any 'auto' values for'margin-left' or 'margin-right' are, for the following rules, treatedas zero.
Ifall of the above have a computed value other than 'auto', the valuesare said to be "over-constrained" and one of the used values willhave to be different from its computed value. If the
If there is exactly one value specified as 'auto', its usedvalue follows from the equality.
If'width' is set to 'auto',any other 'auto' values become '0' and
If both'margin-left' and'margin-right' are 'auto',their used values are equal. This horizontally centers the elementwith respect to the edges of the containing block.
The used value of'width' is determinedas forinline replaced elements.Then the rulesfor non-replacedblock-level elements are applied to determine the margins.
If
If'width' is computed as'auto', the used value is the "shrink-to-fit" width.
Calculation of the shrink-to-fitwidth is similar to calculating the width of a table cell using theautomatic table layout algorithm. Roughly: calculate the preferredwidth by formatting the content without breaking lines other thanwhere explicit line breaks occur, and also calculate the preferredminimum width, e.g., by trying all possible line breaks.CSS 2.1 does not define the exact algorithm. Thirdly, find theavailable width: in this case, this is the width of thecontaining 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 relevantscroll bars.
Then the shrink-to-fit width is: min(max(preferred minimum width,available width), preferred width).
If'margin-left' or
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. Moreprecisely:
But rather than actually calculating the dimensions of thathypothetical box, user agents are free to make a guess at its probableposition.
For the purposes of calculating the static position, the containingblock of fixed positioned elements is the initial containing blockinstead of the viewport, and all scrollable boxes should be assumed tobe scrolled to their origin.
The constraint that determines the used values for theseelements 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': First setany 'auto' values for 'margin-left' and 'margin-right' to 0. Then, ifthe 'direction' property of the element establishing thestatic-position containing block is 'ltr' set 'left'to thestatic position and apply rule numberthree below; otherwise, set 'right' to thestatic position and apply rule numberone below.
If none of the three is 'auto': If both 'margin-left' and'margin-right' are 'auto', solve theequation under the extra constraint that the two margins get equalvalues, unless this would make them negative, in which case whendirection of the containing block is 'ltr' ('rtl'), set 'margin-left'('margin-right') to zeroand solve for 'margin-right' ('margin-left'). If one of'margin-left' or 'margin-right' is 'auto', solve the equation for thatvalue. 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.
Calculation of the shrink-to-fit width is similar to calculatingthe width of a table cell using the automatic table layout algorithm.Roughly: calculate the preferred width by formatting the contentwithout breaking lines other than where explicit line breaks occur,and also calculate the preferredminimum width, e.g., bytrying all possible line breaks. CSS 2.1 does not define theexact algorithm. Thirdly, calculate theavailable width: thisis 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, availablewidth), preferred width).
In this case,section 10.3.7applies up through and including the constraint equation, but the restofsection 10.3.7 is replaced bythe following rules:
If'width' is 'auto', theused value is theshrink-to-fitwidth as for floating elements.
A computed value of 'auto' for
Exactly asinline replacedelements.
Value: | <length> |<percentage> |inherit |
Initial: | 0 |
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: | the percentage as specified or the absolute length |
Value: | <length> |<percentage> | none |inherit |
Initial: | none |
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: | the percentage as specified or the absolute length or 'none' |
These two properties allow authors to constrain content widths to acertain range. Values have the following meanings:
Negative values for
In CSS 2.1, the effect of 'min-width' and 'max-width' ontables, inline tables,table cells, table columns, and column groups is undefined.
The following algorithm describes how the two properties influencetheused valueof the'width' property:
These steps do not affect the real computed values ofthe above properties.
However, for replaced elements with an intrinsic ratio and both
Select from the table the resolved height and width values for theappropriate constraint violation. Take themax-width andmax-height as max(min, max) so thatmin ≤max holds true.In this tablew andh stand for the results ofthe width and height computations ignoring the
Note: In cases where an explicit width or height isset and the other dimension is auto, applying a minimum or maximumconstraint on the auto side can cause an over-constrained situation. The spec is clear in the behavior but it might not be what the authorexpects. The CSS3 object-fit property can be used to obtain differentresults in this situation.
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) | min-width | min(max-height, min-width * h/w) |
(w < min-width) and (h > max-height) | min-width | max-height |
(w > max-width) and (h < min-height) | max-width | min-height |
Then apply the rules under"Calculating widths andmargins" above, as if'width'were computed as this 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: | the percentage or 'auto' (see prose under<percentage>) or the absolute length |
This property specifies thecontent height of boxes.
This property does not apply to non-replacedinline elements. See thesection on computing heights and marginsfor non-replaced inline elements for the rules used instead.
Values have the following meanings:
Note that the height of the containing block of anabsolutely positioned element is independent of the size of theelement itself, and thus a percentage height on such an element canalways be resolved. However, it may be that the height is not knownuntil elements that come later in the document have been processed.
Negative values for'height'are illegal.
Example(s):
For example, the following rule sets the content height of paragraphsto 100 pixels:
p { height: 100px }
Paragraphs of which the height of the contents exceeds 100 pixelswilloverflow according to the'overflow' property.
For calculating the values of'top','margin-top','height','margin-bottom', and'bottom' a distinction must be made betweenvarious kinds of boxes:
For Points 1-6 and 9-10, the used values of 'top' and'bottom' are determined by the rules in section 9.4.3.
Note: these rules apply tothe root element just as to any other element.
Note. The used value of 'height'calculated below is a tentative value, and may have to be calculatedmultiple times, depending on
The'height' property does notapply. The height of the content area should be based on the font, butthis specification does not specify how. A UA may, e.g., use theem-box or the maximum ascender and descender of the font. (The latterwould ensure that glyphs with parts above or below the em-box stillfall within the content area, but leads to differently sized boxes fordifferent fonts; the former would ensure authors can controlbackground styling relative to the 'line-height', but leads to glyphspainting outside their content area.)
Note: level 3 of CSS will probably include a property toselect which measure of the font is used for the content height.
The vertical padding, border and margin of an inline, non-replacedbox start at the top and bottom of the content area, and has nothingto do with the
If more than one font isused (this could happen when glyphs are found in different fonts), theheight of the content area is not defined by this specification.However, we suggest that the height is chosen such that the contentarea is just high enough for either (1) the em-boxes, or (2) themaximum ascenders and descenders, ofall the fonts in theelement. Note that this may be larger than any of the font sizesinvolved, depending on the baseline alignment of the fonts.
If'margin-top', or
If'height' and
Otherwise, if'height' has acomputed value of 'auto', and the element has an intrinsic ratio thenthe used value of'height' is:
(used width) / (intrinsic ratio)
Otherwise, if'height' has acomputed value of 'auto', and the element has an intrinsic height,then that intrinsic height is the used value of
Otherwise, if'height' has acomputed 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:1ratio, has a height not greater than 150px, and has a width notgreater than the device width.
This section also applies to block-level non-replaced elements innormal flow when 'overflow' does not compute to 'visible' but has beenpropagated to the viewport.
If
The element's height is the distance from its top content edge tothe first applicable of the following:
Only children in the normal flow are taken into account (i.e.,floating boxes and absolutely positioned boxes are ignored, andrelatively positioned boxes are considered without their offset). Notethat the child box may be ananonymous block box.
For the purposes of this section and the next, the term "staticposition" (of an element) refers, roughly, to the position an elementwould have had in the normal flow. More precisely, the static positionfor 'top' is the distance from the top edge of the containing block tothe top margin edge of a hypothetical box that would have been thefirst box of the element if its specified
But rather than actually calculating the dimensions of thathypothetical box, user agents are free to make a guess at its probableposition.
For the purposes of calculating the static position, the containingblock of fixed positioned elements is the initial containing blockinstead of the viewport.
For absolutely positioned elements, the used values of the verticaldimensions 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 extraconstraint that the two margins get equal values. If one of'margin-top' or 'margin-bottom' is 'auto', solve the equation for thatvalue. 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 thatapplies.
This situation is similar to the previous one, except that theelement has anintrinsic height. Thesequence of substitutions is now:
This section applies to:
If'margin-top', or
For 'inline-block' elements, the margin box is used when calculatingthe height of the line box.
In certain cases (see, e.g., sections10.6.4 and10.6.6 above), the height of anelement that establishes a block formatting context is computed as follows:
If it only has inline-level children, the height is the distancebetween the top of the topmost line box and the bottom of thebottommost line box.
If it has block-level children, the height is the distance betweenthe top margin-edge of the topmost block-level child box and thebottom margin-edge of the bottommost block-level child box.
Absolutely positioned children are ignored, and relativelypositioned boxes are considered without their offset. Note that thechild box may be ananonymous block box.
In addition, if the element has any floating descendantswhose bottom margin edge is below the element's bottom content edge,then the height is increased to include those edges.Only floats that participate in this block formatting context are taken into account,e.g., floats inside absolutely positioned descendants or other floats are not.
It is sometimes useful to constrain the height of elements to acertain range. Two properties offer this functionality:
Value: | <length> |<percentage> |inherit |
Initial: | 0 |
Applies to: | all elements but non-replaced inline elements, table columns, and column groups |
Inherited: | no |
Percentages: | see prose |
Media: | visual |
Computed value: | the percentage as specified or the absolute length |
Value: | <length> |<percentage> | none |inherit |
Initial: | none |
Applies to: | all elements but non-replaced inline elements, table columns, and column groups |
Inherited: | no |
Percentages: | see prose |
Media: | visual |
Computed value: | the percentage as specified or the absolute length or 'none' |
These two properties allow authors to constrain box heights to acertain range. Values have the following meanings:
Negative values for
In CSS 2.1, the effect of 'min-height' and 'max-height' ontables, inline tables, table cells, table rows, and row groups is undefined.
The following algorithm describes how the two properties influencetheused valueof the'height' property:
These steps do not affect the real computed values ofthe above properties. The change of used
However, for replaced elements with both
As described in the section oninline formatting contexts,user agents flow inline-level boxes into a vertical stack ofline boxes. The height of a line boxis determined as follows:
Empty inline elements generate empty inline boxes, but these boxesstill have margins, padding, borders and a line height, and thusinfluence these calculations just like elements with content.
CSS assumes that every font has font metrics that specify acharacteristic height above the baseline and a depth below it. In thissection we useA to mean that height (for a given font at agiven size) andD the depth. We also defineAD =A +D, the distance from the top to thebottom. (See the note below forhow to findA andD for TrueType and OpenType fonts.)Note that these are metrics of the font as a whole and need notcorrespond to the ascender and descender of any individual glyph.
User agent must align the glyphs in a non-replaced inline box toeach other by their relevant baselines. Then, foreach glyph, determine theA andD. Note thatglyphs in a single element may come from different fonts and thus neednot all have the sameA andD. If the inline boxcontains no glyphs at all, it is considered to contain astrut (an invisible glyph of zero width) with theA andD of the element's first available font.
Still for each glyph, determine the leadingL to add,whereL =
Note.L may be negative.
The height of the inline box encloses allglyphs and their half-leading on each side and is thus exactly'line-height'. Boxes ofchild elements do not influence this height.
Although margins, borders, and padding of non-replaced elements donot enter into the line box calculation, they are still renderedaround inline boxes. This means that if the height specified by
Note. CSS 2.1 does not definewhat the content area of an inline box is (see10.6.1 above) and thus different UAsmay draw the backgrounds and borders in different places.
Note. It isrecommended that implementations that use OpenType or TrueType fontsuse the metrics "sTypoAscender" and "sTypoDescender" from the font'sOS/2 table for A and D (after scaling to the current element's fontsize). In the absence of these metrics, the "Ascent" and "Descent"metrics from the HHEA table should be used.
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 |
On ablock container elementwhose contentis composed ofinline-levelelements, 'line-height' specifies theminimal height of line boxeswithin the element. The minimum height consists of a minimum height abovethe baseline and a minimum depth below it, exactly as if eachline box starts with azero-width inline box with theelement's font and line height properties. We call that imaginarybox a "strut." (The name is inspired by TeX.).
The height and depth of the font above and below the baseline areassumed to be metrics that are contained in the font. (For moredetails, see CSS level 3.)
On a non-replacedinline element, 'line-height'specifies the height that is used in the calculation of the line boxheight.
Values for this property have the following meanings:
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 renderedin more than one font, user agents may determine the 'normal'
Note. When there is only one value of
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 ofthe boxes generated by an inline-level element.
Note. Values of this property havedifferent meanings in the context of tables.Please consult the section ontable height algorithms for details.
The following values only have meaning with respect to a parentinline element, or to thestrut of a parentblock container element.
In the following definitions, for inline non-replaced elements, thebox used for alignment is the box whose height is the 'line-height'(containing the box's glyphs and the half-leading on each side, seeabove). For all other elements, the boxused for alignment is the margin box.
The following values align the element relative to the line box.Since the element may have children aligned relative to it (which inturn may have descendants aligned relative to them), these values usethe bounds of the aligned subtree. Thealigned subtree ofan inline element contains that element and the aligned subtrees ofall children inline elements whose computed 'vertical-align' value isnot 'top' or 'bottom'. The top of the aligned subtree is the highestof the tops of the boxes in the subtree, and the bottom is analogous.
The baseline of an 'inline-table' is the baseline of the first rowof the table.
The baseline of an 'inline-block' is the baseline of its last linebox in the normal flow, unless it has either no in-flow line boxes orif its 'overflow' property has a computed value other than 'visible',in which case the baseline is the bottom margin edge.