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:
Note: This may cause the containing block's width to be negative.
If there is no such ancestor, the content edge of the root element's box establishes thecontaining block. Example(s): With no positioning,block is the initial
containing blocks (C.B.)block.
In the following document: <HTML> <HEAD> <TITLE>Illustration of containing blocks</TITLE> </HEAD> <BODY id="body"> <DIV id="div1"> <P id="p1">Thispaged media, an absolutely positioned element is text inpositioned
relative to its containing block ignoring any page breaks (as if the
first paragraph...</P> <P id="p2">This is text <EM id="em1"> indocument were continuous). The <STRONG id="strong1">second</STRONG> paragraph.</EM></P> </DIV> </BODY> </HTML> are established as follows: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; '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 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 include relative positioning.and 9-10, the values of 'left' and 'right' used for
layout are determined by the rules in section 9.4.3.
The 'width' property does not
apply. A specifiedcomputed value of 'auto' for 'left', 'right', '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'.
If 'width' has a specifiedcomputed value
of 'auto' for 'width' givesand 'height' also has a
computed value of 'auto', the element's intrinsic width asis 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 value.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 'left' or 'right' are given as 'auto', their computed value is 0.The following constraints must hold
betweenamong 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 the border styleIf 'width' is 'none', use '0' asnot '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 border width.)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 specifiedcomputed value other than 'auto', the values
are said to be "over-constrained" and one of the computedused values will
have to be different from its specifiedcomputed 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 computedcalculated 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. 10.3.4 Block-level, replaced elements in normal flow If 'left' or 'right' are 'auto', their computed value is 0. If 'width' is specified as 'auto', its value isThis horizontally centers the element's intrinsic width. If oneelement
with respect to the edges of the margins is 'auto', its computedcontaining block.
The used value of
'width' is given bydetermined
as for 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 specified as 'auto', theircomputed value is '0'. 10.3.6 Floating, replaced elements If 'left' , 'right' , 'margin-left' or 'margin-right' are specifiedas
'auto', their computedused value is '0'.
If 'width' is computed as
'auto', itsthe used value is the 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 calculating 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 to this constraint is reached through a number of substitutions incontent without breaking lines other than
where explicit line breaks occur, and also calculate the following order: If 'left' haspreferred
minimum width, e.g., by trying all possible line breaks.
CSS 2.1 does not define the value 'auto' while 'direction' is 'ltr', replace 'auto' withexact algorithm. Thirdly, find the
distance fromavailable width: in this case, this is the left edgewidth of the
containing block tominus the left margin edgeused values of a hypothetical box that would have been'margin-left',
'border-left-width', 'padding-left', 'padding-right',
'border-right-width', 'margin-right', and the first boxwidths of any relevant
scroll bars.
Then the elementshrink-to-fit width is: min(max(preferred minimum width,
available width), preferred width).
If its 'position' property had been 'static'. (But rather than actually computing that box, user agents'margin-left' or 'margin-right' are freecomputed as
'auto', their used value is '0'. The used value 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 makethe position an element would have had in the normal 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 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.
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 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).
This situation is similar to the previous one, except that the element has an intrinsic width. The sequence of substitutions is now:
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.
The following algorithm describes how the two properties influence
the computedused value
of the 'width' property:
The user agent may define a non-negative minimum valueHowever, for replaced elements with both 'width' and 'height' specified as 'auto', the
'min-width' property, which may varyalgorithm is as follows:
Select from element to elementthe table the resolved height and even depend on other properties. If 'min-width' goes belowwidth 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 limit, either because it was set explicitly, or because it was 'auto'table, w and
h stand for the rules below would make it too small, the user agent may useintrinsic 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) | 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 minimum valuerules under "Calculating widths and
margins" above, as theif '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; '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. 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 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 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 floating, replaced elements If9-10, the used values of 'top' ,and
'bottom' , 'margin-top' , or 'margin-bottom'are 'auto', their computed value is 0. If 'height' is 'auto', the computed value isdetermined by the intrinsic height. 10.6.3 Block-level, non-replaced elementsrules in normal flow, and floating,section 9.4.3.
If 'top' , 'bottom' , 'margin-top' , or 'margin-bottom' are 'auto', their computed value is 0. IfThe 'height' is 'auto',property doesn't
apply. The height depends on whether the element has any block-level children. If it only has inline-level children,of the height is fromcontent area should be based on the top offont, but
this specification does not specify how. A UA may, e.g., use the
topmost line box toem-box or the bottommaximum ascender and descender of the bottommost line box. If it has block-level children, it isfont. (The latter
would ensure that glyphs with parts above or below the distance fromem-box still
fall within the top border-edge ofcontent area, but leads to differently sized boxes for
different fonts; the topmost block-level child box,former would ensure authors can control
background styling relative to the bottom border-edge'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 bottommost block-level child box. Only children infont is used for 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 thatcontent height.
The child box may bevertical padding, border and margin of an anonymous box. 10.6.4 Absolutely positioned,inline, non-replaced
elements For absolutely positioned elements,box start at the vertical dimensions must satisfy this constraint: 'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = heighttop and bottom of containing block (Ifthe border style is 'none', use '0' ascontent area, not the border width.)'line-height'. But only the solution to this constraint'line-height' is reached through a numberused when calculating
the height of substitutions inthe following order:line box.
If 'top' hasmore than one font is
used (this could happen when glyphs are found in different fonts), the
value 'auto' replace it withheight of the distance fromcontent area is not defined by this specification.
However, we suggest that the top edge ofheight is chosen such that the containing block tocontent
area is just high enough for either (1) the top margin edgeem-boxes, or (2) the
maximum ascenders and descenders, of a hypothetical box that would have beenall the first boxfonts in the
element. Note that this may be larger than any of the element if itsfont sizes
involved, depending on the baseline alignment of the fonts.
If 'margin-top', or 'margin-bottom' are 'auto', their used value is 0.
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'. (But'static' and 'float' had been
'none'.
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.
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:
'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 extra
constraint that box, user agentsthe 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 freeover-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
value is negative ifelement has an intrinsic height. The
hypothetical boxsequence of substitutions is abovenow:
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.
For 'inline-block' elements, the margin box is used when calculating the height of the line box.
In certain cases (see the preceding sections), the height of an element 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 hypotheticaldistance between
the top margin-edge of the topmost block-level child box is aboveand 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'bottom margin-edge of the bottommost block-level child box.
Absolutely positioned children are ignored, and 'margin-bottom'relatively
positioned boxes are still 'auto', solve the equation under the extra constraintconsidered 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 for that value. If at this pointbottom, then the valuesheight is increased to include
those edges. Only floats that are over-constrained, ignorechildren of the value for 'bottom' and solve for that value.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.
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.
The following algorithm describes how the two properties influence the computed value of the 'height' property:
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:
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 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 computedused
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''12px' high and the 'line-height' value is '14pt', 2pts'14px',
2pxs of extra space should be added: 1pt1px above and 1pt1px below the
letters. (This applies to empty boxes as well, as if the empty box
contained an infinitelyinfinitesimally 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 adjacentadjoining 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 adjacentadjoining line boxes. However, in this case, someUser agents may useshould
render the line boxboxes in document order. This will cause the borders on
subsequent lines to "clip"paint over the borderborders and padding areas (i.e., not render them).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 |
| | for <length> and <percentage> the |
On a block-level, table-cell, table-caption or inline-block element whose content
is composed of inline-level
elements, it'line-height' specifies the minimal height of line boxes
within the element. The minimum height consists 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. Ifbox with the
property is setblock's font and line height properties (what TEX calls a
"strut").
On an inline-level element, it'line-height'
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 shouldmay 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.Note. Values of this property have
slightly different 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-level element, or to the strut of a parent block-level, table-cell, table-caption or inline-block element.
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.
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.