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 box generated by C.B. is established by body initial C.B. (UA-dependent)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 |
|---|---|
| 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 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 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.
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. If the 'direction' property has the value 'ltr',an intrinsic ratio; then the specifiedused
value of 'margin-right' is ignored'width' is:
(used height) * (intrinsic ratio)
If 'height' and the value is'width' both
have computed so as to makevalues of 'auto' and the equality true. Ifelement has an intrinsic ratio
but no intrinsic height or width and the containing block's width
does not itself depend on the replaced element's width, then the used
value of 'direction' is 'ltr', this happens to 'margin-left' instead. If there'width' is exactly one value specified as 'auto', its computed value follows from the equality. If 'width' is set to 'auto', any other 'auto' values become '0' and 'width' followscalculated from the resulting equality. If both 'margin-left' and 'margin-right' are 'auto', their computed values are equal. 10.3.4constraint equation used for
block-level, replacednon-replaced elements in normal flowflow.
Otherwise, if 'left' or 'right' are 'auto', their'width' has a
computed value is 0. If 'width' is specified asof 'auto', its value isand the element'selement has an intrinsic width. If one of the margins is 'auto', its computed valuewidth, then
that intrinsic width is given bythe constraints above. Furthermore, if both margins are 'auto', their computed values are equal. 10.3.5 Floating, non-replaced elementsused value of 'width'.
Otherwise, if 'left' , 'right' ,'width' , 'margin-left' , or 'margin-right' are specified as 'auto', theirhas a
computed value is '0'. 10.3.6 Floating, replaced elements If 'left' , 'right' , 'margin-left' or 'margin-right' are specified asof 'auto', their computedbut none of the conditions above are met,
then the used value is '0'. Ifof 'width'
becomes 300px. If 300px is 'auto', its value istoo wide to fit the element'sdevice, 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 does not itself depend on the
replaced element's width. 10.3.7 Absolutely positioned,If it does, then the resulting layout is
undefined in CSS 2.1.
The constraint that determinesfollowing constraints must hold
among the computedused values for these elements is: 'left' +of the other properties:
'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right'
+ 'right'= width of containing block
(If the border style is 'none', use '0' as the border width.) The solution to this constraintIf 'width' is reached through a number of substitutions in the following order: If 'left' has the valuenot 'auto' while 'direction'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 'ltr', replace 'auto' with the distance fromlarger than
the left edgewidth of the containing block toblock, then any 'auto' values for
'margin-left' or 'margin-right' are, for the left margin edgefollowing rules, treated
as zero.
If
all of a hypothetical box that wouldthe above have beena computed value other than 'auto', the first boxvalues
are said to be "over-constrained" and one of the element if its 'position' property had been 'static'. (But rather than actually computing that box, user agents are freeused values will
have to make a guess atbe different from its probable position.) The value is negativecomputed value. If the hypothetical box is to the left'direction'
property of the containing block. If 'right'block has the value 'auto' while 'direction' is 'rtl', replace 'auto' with the distance from'ltr', the right edgespecified
value of 'margin-right' is ignored and the
containing blockvalue is calculated so as to make the right margin edge of the same hypothetical box as above.equality true. If the value of
'direction' is positive'rtl', this
happens to 'margin-left' instead.
If the hypothetical boxthere is to the left ofexactly one value specified as 'auto', its used
value follows from the containing block's edge.equality.
If 'width' is set to 'auto',
replaceany remainingother 'auto' for 'left' or 'right' with '0'. If 'left' , 'right' orvalues become '0' and 'width' are (still) 'auto', replace any 'auto' on 'margin-left' or 'margin-right' with '0'.follows from the resulting
equality.
If at this pointboth 'margin-left' and
'margin-right' are still'auto',
solvetheir used values are equal. This horizontally centers the equation underelement
with respect to the extra constraint that the two margins must get equal values. If at this point there is only one 'auto' left, solve the equation for that value. If at this pointedges of the values are over-constrained, ignorecontaining block.
The used value for either 'left' (in case 'direction' is 'rtl') or 'right' (in case 'direction'of
'width' is 'ltr') and solvedetermined
as for that value. 10.3.8 Absolutely positioned,inline replaced
elements This situation is similar to the previous one, except that.
Then the element has an intrinsic width.rules for non-replaced
block-level elements are applied to determine the sequence of substitutionsmargins.
If 'margin-left', or 'margin-right' are computed as
'auto', their used value is now:'0'.
If 'width' is computed as
'auto', substitute the element's intrinsic width. If 'left' hasthe used value 'auto' while 'direction'is 'ltr', replace 'auto' with the distance fromthe left edge"shrink-to-fit" width.
Calculation of the containing blockshrink-to-fit
width is similar to calculating the left margin edgewidth of a hypothetical box that would have been the first box oftable cell using the
element 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.)automatic table layout algorithm. Roughly: calculate the value is negative ifpreferred
width by formatting the hypothetical box is tocontent without breaking lines other than
where explicit line breaks occur, and also calculate the left ofpreferred
minimum width, e.g., by trying all possible line breaks.
CSS 2.1 does not define the containing block. If 'right' hasexact algorithm. Thirdly, find the
value 'auto' while 'direction'available width: in this case, this is 'rtl', replace 'auto' with the distance fromthe right edgewidth of the
containing block tominus the right margin edgeused 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 'margin-left' or 'margin-right' are computed 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 the position an element would have had in the normal flow. More precisely:
But rather than actually calculating the dimensions of that hypothetical box, user agents are free to make a guess at its probable position.
For the purposes of calculating the static position, the containing block of fixed positioned elements is the initial containing block instead of the viewport, and all scrollable boxes should be assumed to be scrolled to their origin.
The constraint that determines the used values for these elements is:
'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 set any 'auto' values for 'margin-left' and 'margin-right' 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 both 'margin-left' and 'margin-right' are 'auto', solve the equation under the extra constraint that the two margins get equal values, unless this would make them negative, in which case when direction of the containing block is 'ltr' ('rtl'), set 'margin-left' ('margin-right') to zero and solve for 'margin-right' ('margin-left'). If one of 'margin-left' or 'margin-right' is 'auto', solve the equation for that value. If the values are over-constrained, ignore the value for 'left' (in case the 'direction' property of the containing block is 'rtl') or 'right' (in case 'direction' is 'ltr') and solve for that value.
Otherwise, set 'auto' values for 'margin-left' and 'margin-right' to 0, and pick the one of the following six rules that applies.
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: | 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 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 used value of the 'width' property:
These steps do not affect the real computed values of the above properties.
However, for replaced elements with '0'. If at this pointan intrinsic ratio and both
'margin-left''width' and 'margin-right' are still'height' specified as 'auto', solve the equation under the extra constraint thatthe
two margins must get equal values. If at this point therealgorithm is only one 'auto' left, solveas follows:
Select from the equationtable the resolved height and width values for the
appropriate constraint violation. Take the max-width and
max-height as max(min, max) so that value. If atmin ≤
max holds true.
In this pointtable w and h stand for the valuesresults of
the width and height computations ignoring the 'min-width', 'min-height', 'max-width' and 'max-height' properties. Normally
these are over-constrained, ignorethe value for either 'left' (inintrinsic width and height, but they may not be in the
case 'direction' is 'rtl')of replaced elements with intrinsic ratios.
Note: In cases where an explicit width or 'right' (in case 'direction'height is
'ltr')set and solve for that value. 10.4the other dimension is auto, applying a minimum andor 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 image-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 : 'min-width'and
'max-width' 'min-width'margins" above, as if 'width'
were computed as this value.
| Value: | <length> | <percentage> | auto | inherit |
| Initial: | |
| Applies to: | all elements |
| Inherited: | no |
| Percentages: | |
| Media: | visual |
| | |
This property specifies the content height of boxes generated by block-level, inline-block and replaced elements.
This property does not apply to non-replaced inline elementsinline-level elements. See the section on computing heights and tablemargins
for non-replaced inline elements Inherited: no Percentages: refer to width of containing block Media: visual These two properties allow authors to constrain box widths to a certain range.for the rules used instead.
Values have the following meanings:
Note that the computed valueheight of 'min-width' is greater thanthe valuecontaining block of 'max-width' , 'max-width'an
absolutely positioned element is set toindependent of the valuesize of 'min-width' . Ifthe
computed widthelement itself, and thus a percentage height on such an element can
always be resolved. However, it may be that the height is greater than 'max-width' ,not known
until elements that come later in the rules abovedocument have been processed.
Negative values for 'height'
are applied again, but this time usingillegal.
For example, the valuefollowing rule sets the content height of 'max-width' asparagraphs
to 100 pixels:
p { height: 100px }
Paragraphs of which the specified valueheight of the contents exceeds 100 pixels
will overflow according to the
'overflow' property.
For 'width' . Ifcalculating the computed width is smaller than 'min-width'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 rules aboveused values of 'top' and
'bottom' are applied again, but this time usingdetermined by the rules in section 9.4.3.
Note: these rules apply to
the value of 'min-width'root element just as to any other element.
The specified value for 'width' .'height' property does not
apply. The user agent may define a non-negative minimum value forheight of the 'min-width' property, which may vary from element to element and even dependcontent area should be based on other properties. If 'min-width' goes belowthe font, but
this limit, either because it was set explicitly,specification does not specify how. A UA may, e.g., use the
em-box or because it was 'auto'the maximum ascender and descender of the rules belowfont. (The latter
would make it too small, the user agent may useensure that glyphs with parts above or below the minimum value asem-box still
fall within the computed value. 10.5content height : the 'height' property 'height' Value: <length> | <percentage> | auto | inherit Initial: auto Applies to: all elementsarea, but non-replaced inline elements, table columns, and column groups Inherited: no Percentages: see prose Media: visual This property specifiesleads to differently sized boxes for
different fonts; the former would ensure authors can control
background styling relative to the 'line-height', but leads to glyphs
painting outside their content heightarea.)
Note: level 3 of boxes generated by block-level and replaced elements. ThisCSS will probably include a property does not applyto
non-replaced inline-level elements.select which measure of the heightfont is used for the content height.
The vertical padding, border and margin of aan inline, non-replaced
inline element's boxes is given bybox start at the element's (possibly inherited) 'line-height' value. Values havetop and bottom of the following meanings: <length> Specifies a fixed height. <percentage> Specifies a percentage height.content area, not the percentage'line-height'. But only the 'line-height' is calculated with respect toused when calculating
the height of the generated box's containing block .line box.
If more than one font is
used (this could happen when glyphs are found in different fonts), the
height of the containing block is not specified explicitly (i.e., it depends oncontent height), the valuearea is interpreted like 'auto'. autonot defined by this specification.
However, we suggest that the height depends on the values of other properties. Seeis chosen such that the prose below. Negative values for 'height' are illegal. Example(s):content
area is just high enough for example,either (1) the following rule fixesem-boxes, or (2) the
heightmaximum ascenders and descenders, of paragraphs to 100 pixels: P { height: 100px } Paragraphsall the fonts in the
element. Note that require morethis may be larger than 100 pixelsany of height will overflow according tothe 'overflow' property. 10.6 Computing heights and margins For computingfont sizes
involved, depending on the values of 'top' , 'margin-top' , 'height' , 'margin-bottom' , and 'bottom' a distinction must be made between various kindsbaseline alignment of boxes: inline, non-replaced elements inline,the fonts.
Points 1-6 include relative positioning. 10.6.1 Inline, non-replaced elementsIf 'top' , 'bottom' ,'margin-top', or 'margin-bottom' are 'auto',
their computedused value is 0.
If 'height' and 'width' both have computed values of 'auto' and the element also has an intrinsic height, then that intrinsic height is the used value of 'height'.
Otherwise, if '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'
property doesn't apply, butmust be set to the height of the boxlargest rectangle that has a 2:1
ratio, has a height not greater than 150px, and has a width not
greater than the device width.
Percentage intrinsic heights are evaluated with respect to the
containing block's height, if that height is given byspecified explicitly, or
if the 'line-height' property. 10.6.2 Inline,replaced elements block-level,element is absolutely positioned. If neither of these
conditions is met, then percentage values on such replaced elements
in normal flow,cannot be resolved and floating, replacedsuch elements If 'top' , 'bottom' , 'margin-top' , or 'margin-bottom'are 'auto', their computed value is 0. If 'height' is 'auto',assumed to have no intrinsic
height.
For 'inline' and 'inline-block' elements, the computed valuemargin box is used
when calculating the intrinsic height.height of the line box.
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 'top' , 'bottom' ,'margin-top', or 'margin-bottom' are 'auto',
their computedused value is 0. If 'height' is 'auto', the height depends
on whether the element has any block-level children.children and whether it has
padding or borders:
If it only has inline-level children, the height is fromthe distance
between the top of the topmost line box toand the bottom of the
bottommost line box.
If
it has block-level children, the height is the distance between the
top border-edge of the topmost block-level child box that does not have
margins collapsed through it
and the bottom border-edge of the bottommost block-level child box
that does not 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
bottompresence of the bottommost line box. If it has block-level children, it ispadding/border prevents the distancetop margins from collapsing.) Similarly, if the
top border-edgebottom margin of the topmost block-level child box, toblock does not collapse with the bottom border-edgemargin of
its last in-flow child, then the content ends at the bottom margin
edge of the bottommost block-level child box.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 absolutely positioned elements,the vertical dimensions must satisfy this constraint: 'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = heightpurposes of containing block (If the border style is 'none', use '0' asthis section and the border width.)next, the solutionterm "static
position" (of an element) refers, roughly, to this constraint is reached through a number of substitutionsthe position an element
would have had in the following order: If 'top' hasnormal flow. More precisely, the value 'auto' replace it withstatic position
for 'top' is the distance from the top edge of the containing block to
the top margin edge of a hypothetical box that would have been the
first box of the element if its specified 'position' propertyvalue had been 'static'
and its specified 'float' had been
'none' and 'clear' had been
'static'. (But'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 value is negative ifpurposes of calculating the hypothetical boxstatic position, the containing
block of fixed positioned elements is abovethe initial containing block. If bothblock
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', replace 'bottom' with 0.auto, set 'top'
to the static position and apply rule number three below.
If 'bottom' or 'height'none of the three are (still) 'auto', replace any 'auto' on 'margin-top' or 'margin-bottom' with '0'.'auto': If at this pointboth 'margin-top' and
'margin-bottom' are still'auto', solve the equation under the extra
constraint that the two margins mustget equal values. If at this point there is onlyone 'auto' left,of
'margin-top' or 'margin-bottom' is 'auto', solve the equation for that
value. If at this pointthe 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 section applies to:
If 'margin-top', or 'margin-bottom' are 'auto', their used value is 0. If 'height' is 'auto', the height depends on the element's 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 it only has inline-level children, the height is the distance between the top of the topmost line box and the bottom of the bottommost line box.
If it has block-level children, the height is the distance between the top margin-edge of the topmost block-level child box and the bottom margin-edge of the bottommost block-level child box.
Absolutely positioned children are ignored, and relatively positioned boxes are considered without their offset. Note that the child box may be an anonymous block box.
In addition, if the element has any floating descendants whose bottom margin edge is below the bottom, then the height is increased to include those edges. Only floats that are children of the element itself or of descendants in the normal flow are taken into account, e.g., floats inside absolutely positioned descendants or other floats are not.
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: | |
| 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 |
| 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 computedused value
of the 'height' property:
These steps do not affect the real computed values of the above properties. The change of used 'height' has no effect on margin collapsing except as specifically required by rules for 'min-height' or 'max-height' in "Collapsing margins" (8.3.1).
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. Note that if all the boxes in the line box are aligned along their bottoms, the line box will be exactly the height of the tallest box. If, however, the boxes are aligned alonghave margins, padding, borders and a common baseline, theline box top and bottom may not touch the topheight, and bottom of the tallest box.thus
influence these calculations just like elements with content.
Since the heightvalue of an inline box'line-height' may be different
from the font sizeheight of text inthe box (e.g., 'line-height' > 1em),content area there may be space above and below
rendered glyphs. The difference between the font sizecontent height and the 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 infinitely narrow letter.)
When the 'line-height'
value is less than the font size,content height, the final inline box height will be
less than the font size and the rendered glyphs will "bleed" outside
the box. If such a box touches the edge of a line box, the rendered
glyphs will also "bleed" into the 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. Note that replaced elements have a 'font-size' and a 'line-height' property, even if they are not used directly to determine the heightapart. This is
important when columns of the box. The 'font-size' is, however, usedtext in different fonts have to define the 'em' and 'ex' units, and the 'line-height' has a rolebe aligned,
for example in the 'vertical-align' property.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-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.
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.