Contents
The position and size of an element's box(es) are sometimes
computedcalculated 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.
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
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.
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>
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: | the percentage or 'auto' as specified or the absolute length |
This property specifies the content width of boxes generated by block-level and replaced elements.boxes.
This property does not apply to non-replaced inline-levelinline 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 computedvalues 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 computedvalues used are the same as the specifiedcomputed 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:
For Points 1-6 and 9-10, the 'width' property does not apply. A specified valuevalues of 'auto' for'left' ,and 'right' in the
case of relatively positioned elements are determined by the rules in section 9.4.3.
Note. The used value of 'width' calculated below is a tentative value, and may have to be calculated multiple times, depending on 'min-width' and 'max-width', see the section Minimum and maximum widths below.
The 'width' property does not
apply. A computed value of 'auto' for 'margin-left' or 'margin-right' becomes a computedused
value of '0'.
A specifiedcomputed value of 'auto' for 'left' , 'right' ,'margin-left' or 'margin-right' becomes a computedused
value of '0'.
A specified valueIf 'height' and 'width' both have computed values of
'auto' for 'width' givesand the element'selement also has an intrinsic width, then that
intrinsic width as the computed value. 10.3.3 Block-level, non-replaced elements in normal flow If 'left' or 'right' are given as 'auto', their computed valueis 0. The following constraints must hold betweenthe other properties: 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = widthused value of containing block (If the border style is 'none', use '0' as the border width.)'width'.
If all'height' and 'width' both have computed values of
'auto' and the aboveelement has no intrinsic width, but does have an
intrinsic height and intrinsic ratio; or if 'width' has a specifiedcomputed value other thanof 'auto',
the values are said to be "over-constrained"'height' has some other computed
value, and one ofthe computed values willelement does have to be different from its specified value.an intrinsic ratio; then the used
value of 'width' is:
(used height) * (intrinsic ratio)
If 'height' and 'width' both
have computed values of 'auto' and the 'direction' propertyelement has an intrinsic ratio
but no intrinsic height or width, then the value 'ltr', the specifiedused value of 'margin-right''width' is
ignored and the valueundefined in CSS 2.1.
However, it is computed sosuggested that, if the containing block's width
does not itself depend on the replaced element's width, then the used
value of 'width' is calculated from the constraint equation used for
block-level, non-replaced elements in normal flow.
Otherwise, if 'width' has a computed value of 'auto', and the element has an intrinsic width, then that intrinsic width is the used value of 'width'.
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.
The following constraints must hold among the used values of the other properties:
'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing 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 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 'ltr','rtl', this
happens to 'margin-left' instead.
If there is exactly one value specified as 'auto', its computedused
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 computedused values are equal. This horizontally centers the element
with respect to the edges of the containing block.
If 'left' or 'right' are 'auto', their computedThe used value is 0. Ifof
'width' is specifieddetermined
as 'auto', its value is the element's intrinsic width. If one of the margins is 'auto', its computed value is given byfor inline replaced
elements.
Then the constraints above. Furthermore, if both margins are 'auto', their computed valuesrules for non-replaced
block-level elements are equal.applied to determine the margins.
If 'left' , 'right' , 'width' ,'margin-left', or 'margin-right' are specifiedcomputed as
'auto', their computedused value is '0'.
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).
If 'left' , 'right' ,'margin-left' or 'margin-right' are specifiedcomputed as
'auto', their computedused value is '0'. If 'width' is 'auto', itsThe used value of 'width' is the element's intrinsic width.determined as for inline replaced elements.
The constraint that determines the computed valuesFor these elements is: 'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block (Ifthe 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 'left' hasnormal flow. More
precisely:
If 'width'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 'auto', replace any remaining 'auto'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:
'left'
or+ 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right'with '0'.= width of containing block
If 'left' ,all three of 'left', 'width', and 'right' or 'width'are (still) 'auto', replace'auto': First set
any 'auto' onvalues for 'margin-left' orand 'margin-right' with '0'.to 0. Then, if
the 'direction' property of the element establishing the
static-position 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 at this pointboth 'margin-left' and
'margin-right' are still'auto', solve the
equation under the extra constraint that the two margins mustget equal
values. If atvalues, unless this point therewould make them negative, in which case when
direction of the containing block is only'ltr' ('rtl'), set 'margin-left'
('margin-right') to zero
and solve for 'margin-right' ('margin-left'). If one 'auto' left,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 the 'direction' property of the containing block 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 that the element has an intrinsic width. The sequenceone of substitutions is now: Ifthe following six rules that applies.
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).
In this case, section 10.3.7 applies up through and including the constraint equation, but the rest of section 10.3.7 is replaced by the following rules:
If 'width' is 'auto', the used value is the shrink-to-fit width as for floating elements.
A computed value of 'auto' for 'margin-left' or 'margin-right' becomes a used value of '0'.
Exactly as inline replaced elements.
| Value: | <length> | <percentage> | inherit |
| Initial: | |
| Applies to: | all elements |
| 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 |
| 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 boxcontent widths to a
certain range. Values have the following meanings:
Negative values for 'min-width' and 'max-width' are illegal.
In CSS 2.1, the effect of 'min-width' and 'max-width' on tables, inline tables, table cells, table columns, and column groups is undefined.
The following algorithm describes how the two properties influence
the computedused value
of the 'width' property:
These steps do not affect the user agent may define a non-negative minimum value forreal computed values of
the 'min-width' property, which may vary from element to element and even depend on otherabove properties.
If 'min-width' goes below this limit, either because it was set explicitly, or because it was 'auto'However, for replaced elements with an intrinsic ratio and the rules below would make it too small, the user agent may use the minimum valueboth
'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 results of the width and height computations ignoring the 'min-width', 'min-height', 'max-width' and 'max-height' properties. Normally these are the intrinsic width and height, but they may not be in the case of replaced elements with intrinsic ratios.
Note: In cases where an explicit width or height is set and the other dimension is auto, applying a minimum or maximum constraint on the auto side can cause an over-constrained situation. The spec is clear in the behavior but it might not be what the author expects. The CSS3 object-fit property can be used to obtain different results 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 and margins" 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' (as specified) or the absolute length |
This property specifies the content height of boxes generated by block-level and replaced elements.boxes.
This property does not apply to non-replaced inline-levelinline elements. See the height of asection on computing heights and margins
for non-replaced inline element's boxes is given byelements for the element's (possibly inherited) 'line-height' value.rules used instead.
Values have the following meanings:
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.
Negative values for 'height' are illegal.
For example, the following rule sets 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 computingcalculating the values of 'top', 'margin-top', 'height',
'margin-bottom', and 'bottom' a distinction must be made between
various kinds of boxes:
For Points 1-6 and 9-10, the used values of 'top' ,and
'bottom' , 'margin-top' , or 'margin-bottom'are 'auto', their computeddetermined by the rules in section 9.4.3.
Note: these rules apply to the root element just as to any other element.
Note. The used value of 'height'
calculated below is 0.a tentative value, and may have to be calculated
multiple times, depending on 'min-height' and 'max-height', see the section Minimum and maximum heights below.
The 'height' property doesn't apply, butdoes not
apply. The height of the box is given bycontent area should be based on the 'line-height' property. 10.6.2 Inline, replaced elements block-level, replaced elements in normal flow, and floating, replaced elements If 'top' , 'bottom' , 'margin-top' ,font, but
this specification does not specify how. A UA may, e.g., use the
em-box or 'margin-bottom' are 'auto',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 computed valuecontent area.)
Note: level 3 of CSS will probably include a property to
select which measure of the font is 0.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, and has nothing to do with the 'line-height'. But only the 'line-height' is used when calculating the height of the line box.
If 'height'more than one font is
'auto',used (this could happen when glyphs are found in different fonts), the
computed valueheight of the content area is not defined by this specification.
However, we suggest that the intrinsic height. 10.6.3 Block-level, non-replacedheight 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 computedused value is 0.
If 'height' is 'auto', the height depends on whetherand 'width' both have computed values of
'auto' and the element also has any block-level children. If it only has inline-level children, thean intrinsic height, then that
intrinsic height is from the top ofthe topmost line box to the bottomused value of the bottommost line box.'height'.
Otherwise, if it'height' has a
computed value of 'auto', and the element has an intrinsic ratio then
the used value of 'height' is:
(used width) / (intrinsic ratio)
Otherwise, if 'height' has a computed value of 'auto', and the element has an intrinsic height, then that intrinsic height is the used value of 'height'.
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 the height of the largest rectangle that has a 2:1 ratio, has a height not greater than 150px, and has a width not greater than the device width.
This section also applies to block-level non-replaced elements in normal flow when 'overflow' does not compute to 'visible' but has been propagated to the viewport.
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:
The element's height is the distance from theits top border-edgecontent edge to
the first applicable of the topmost block-level childfollowing:
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 absolutely positioned elements,the vertical dimensions must satisfypurposes of this constraint: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' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block (If the border style is 'none', use '0' as the border width.) The solution to this constraintis reached through a number of substitutions in the following order: If 'top' has the value 'auto' replace it withthe 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 specified 'position' propertyvalue had been 'static'
and its specified 'float' had been
'static'. (But'none' and its specified 'clear'
had been 'none'. (Note that due to the rules
in section 9.7 this might
require also assuming a different computed value for 'display'.)
The value is negative if the hypothetical box is above the containing
block.
But rather than actually computingcalculating the dimensions of that
hypothetical box, user agents are free to make a guess at its probable
position.)position.
For the valuepurposes of calculating the static position, the containing
block of fixed positioned elements is negativethe initial containing block
instead of the viewport.
For absolutely positioned elements, the used values of the vertical 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 boxstatic 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.
This situation is similar to the previous one, except that the element has an intrinsic height. The sequence of substitutions is now:
This situation is similarsection applies to:
If 'margin-top', or 'margin-bottom' are 'auto',
their used value is now:0. If 'height' is 'auto', substitutethe height depends on the element's intrinsic height.descendants per 10.6.7.
For 'inline-block' elements, the margin box is used when calculating the height of the line box.
In certain cases (see, e.g., sections 10.6.4 and 10.6.6 above), the height of an element that establishes a block formatting context is computed as follows:
If 'top'it only has inline-level children, the value 'auto', replace it withheight is the distance
frombetween the top edgeof the containing block to the top margin edge of a hypotheticaltopmost line box that would have beenand the first boxbottom of the
elementbottommost line box.
If its 'position' property had been 'static'. (But rather than actually computing that box, user agents are free to make a guess at its probable position.)it has block-level children, the valueheight is negative ifthe hypothetical box is abovedistance between
the containing block. If 'bottom' is 'auto', replace any 'auto' on 'margin-top' or 'margin-bottom' with '0'. If at this point both 'margin-top'top margin-edge of the topmost block-level child box and 'margin-bottom' are still 'auto', solvethe
equation underbottom margin-edge of the extra constraintbottommost block-level child box.
Absolutely positioned children are ignored, and relatively
positioned boxes are considered without their offset. Note that the
two margins must get equal values.child box may be an anonymous block box.
In addition, if at this point therethe element has any floating descendants
whose bottom margin edge is only one 'auto' left, solvebelow the equation forelement's bottom content edge,
then the height is increased to include those edges.
Only floats that value. If atparticipate in this point the valuesblock formatting context are over-constrained, ignore the value for 'bottom' and solve for that value.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 a certain range. Two properties offer this functionality:
| Value: | <length> | <percentage> | inherit |
| Initial: | 0 |
| Applies to: | all elements |
| Inherited: | no |
| Percentages: | |
| Media: | visual |
| Computed value: | the percentage as specified or the absolute length |
| Value: | <length> | <percentage> | none | inherit |
| Initial: | none |
| Applies to: | all elements |
| Inherited: | no |
| Percentages: | |
| Media: | visual |
| Computed value: | the percentage as specified or the absolute length or 'none' |
These two properties allow authors to constrain box heights to a certain range. Values have the following meanings:
Negative values for 'min-height' and 'max-height' are illegal.
In CSS 2.1, the effect of 'min-height' and 'max-height' on tables, inline tables, table cells, table rows, and row groups is undefined.
The following algorithm describes how the two properties influence
the computedused value
of the 'height' property:
IfThese steps do not affect the real computed value of
'height'. Consequently, for
example, they do not affect margin collapsing, which depends on the
computed value.
However, for replaced elements with both 'width' and 'height' computed as 'auto', use the
computed height is smaller than 'min-height' ,algorithm under Minimum and maximum
widths above to find the used width and height. Then apply the
rules above are applied again, but this timeunder "Computing
heights and margins" above, using the value of 'min-height'resulting width and height as
if they were the specified value for 'height' .computed values.
As described in the section on inline formatting contexts,
user agents flow inlineinline-level 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.
CSS assumes that if allevery font has font metrics that specify a
characteristic height above the boxesbaseline and a depth below it. In this
section we use A to mean that height (for a given font at a
given size) and D the line box are aligned along their bottoms,depth. We also define AD =
A + D, the line box will be exactlydistance from the height oftop to the
tallest box. If, however,bottom. (See the boxes are aligned alongnote below for how to find
A common baseline,and D for TrueType and OpenType fonts.)
Note that these are metrics of the line box topfont as a whole and bottom mayneed not
touchcorrespond to the topascender and bottomdescender of any individual glyph.
User agent must align the glyphs in a non-replaced inline box to
each other by their relevant baselines. Then, for
each glyph, determine the A and D. Note that
glyphs in a single element may come from different fonts and thus need
not all have the tallest box. 10.8.1 Leadingsame A and half-leading SinceD. If the height of aninline box
may be different from the font sizecontains no glyphs at all, it is considered to contain a strut (an invisible glyph of text in the box (e.g., 'line-height' > 1em), there may be space above and below rendered glyphs. The difference betweenzero width) with the
font sizeA and the computed valueD of 'line-height' is calledthe element's first available font.
Still for each glyph, determine the leading L to add,
where L = 'line-height' - AD. Half
the leading is calledadded above A and the half-leading . User agents center glyphs vertically in an inline box, adding half-leading onother half below
D, giving the topglyph and bottom. For example, ifits leading a piecetotal height above
the baseline of text is '12pt' highA' = A + L/2 and the 'line-height' value is '14pt', 2ptsa
total depth of extra space shouldD' = D + L/2.
Note. L may 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.) Whennegative.
The 'line-height' value is less than the font size,height of the finalinline box height will be less than the font size and the renderedencloses all
glyphs will "bleed" outside the box. If such a box touches the edgeand their half-leading on each side and is thus exactly
'line-height'. Boxes of
a line box, the rendered glyphs will also "bleed" into the adjacent line box.child elements do not influence this height.
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 adjacentadjoining line boxes. However, in this case, someUser 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.
Note. CSS 2.1 does not define what the content area of an inline box is (see 10.6.1 above) and thus different UAs may draw the backgrounds and borders in different places.
Note. It is
recommended that implementations that use OpenType or TrueType fonts
use the line boxmetrics "sTypoAscender" and "sTypoDescender" from the font's
OS/2 table for A and D (after scaling to "clip"the bordercurrent element's font
size). In the absence of these metrics, the "Ascent" and padding areas (i.e., not render them)."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 |
| | for <length> and <percentage> the |
On a block-levelblock container element
whose content
is composed of inline-level
elements, it'line-height' specifies the minimal height of each generated inline box. Ifline boxes
within the property is set on an inline-level element, it specifieselement. The exactminimum height consists of a minimum height above
the baseline and a minimum depth below it, exactly as if each
line box generatedstarts with a zero-width inline box with the
element's font and line height properties. We call that imaginary
box a "strut." (The name is inspired by TeX.).
The element. (Except forheight and depth of the font above and below the baseline are
assumed to be metrics that are contained in the font. (For more
details, see CSS level 3.)
On a non-replaced inline replaced elements, whereelement, 'line-height'
specifies the height that is used in the calculation of the line box
is given by the 'height' property.)height.
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 shouldmay determine the 'normal' 'line-height' value according to
the largest font size.
Generally,Note. When there is only one value of 'line-height' for all inline
boxes in a paragraphblock container box and they are all in the same font (and
there are no tall images),replaced elements, inline-block
elements, etc.), 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.Note. Values of this property have
slightlydifferent meanings in the context of tables.
Please consult the section on
table height algorithms for details.
The following values only have meaning with respect to a parent inline element, or to the strut of a parent block container element.
In the following definitions, for inline non-replaced elements, the box used for alignment is the box whose height is the 'line-height' (containing the box's glyphs and the half-leading on each side, see above). For all other elements, the box used for alignment is the margin box.
The remainingfollowing values referalign the element relative to the line boxbox.
Since the element may have children aligned relative to it (which in
whichturn may have descendants aligned relative to them), these values use
the generated box appears: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.
The baseline of an 'inline-table' is the baseline of the first row of the table.
The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.