Movatterモバイル変換
[0]ホーム
Contents
- 10.1 Definition of "containing block"
- 10.2 Content width: the'width' property
- 10.3 Calculating widths and margins
- 10.3.1 Inline, non-replaced elements
- 10.3.2 Inline, replaced elements
- 10.3.3 Block-level, non-replaced elements in normal flow
- 10.3.4 Block-level, replaced elements in normal flow
- 10.3.5 Floating, non-replaced elements
- 10.3.6 Floating, replaced elements
- 10.3.7 Absolutely positioned, non-replaced elements
- 10.3.8 Absolutely positioned, replaced elements
- 10.3.9 'Inline-block', non-replaced elements in normal flow
- 10.3.10 'Inline-block', replaced elements in normal flow
- 10.4 Minimum and maximum widths:'min-width' and'max-width'
- 10.5 Content height: the'height' property
- 10.6 Calculating heights and margins
- 10.7 Minimum and maximum heights:'min-height' and'max-height'
- 10.8 Line height calculations: the'line-height' and'vertical-align' properties
The position and size of an element's box(es) are sometimescalculated relative to a certain rectangle, called thecontainingblock of the element. The containing block of an elementis defined as follows:
- The containing block in which therootelement lives is a rectangle called theinitial containing block. For continuousmedia, it has the dimensions of theviewport and is anchored at thecanvas origin; it is thepage areafor paged media. The 'direction' property of the initialcontaining block is the same as for the root element.
- For other elements, if the element's position is 'relative' or 'static',the containing block is formed by the content edge of the nearestblock container ancestor box.
- If the element has 'position: fixed', the containing block isestablished by theviewportin the case of continuous media or the page area in the case of paged media.
- If the element has 'position: absolute', the containing block isestablished by the nearest ancestor with a'position' of 'absolute', 'relative'or 'fixed', in the following way:
- In the case that the ancestor is an inline element, the containingblock is the bounding box around the padding boxes of the first andthe last inline boxesgenerated for that element. In CSS 2.1, if the inlineelement is splitacross multiple lines, the containing block is undefined.
- Otherwise, the containing blockis formed by thepadding edge ofthe ancestor.
If there is no such ancestor, the containing block is the initialcontaining block.
In paged media, an absolutely positioned element is positionedrelative to its containing block ignoring any page breaks (as if thedocument were continuous). The element may subsequently be broken overseveral pages.
For absolutely positioned content that resolves to a position on apage other than the page being laid out (the current page), orresolves to a position on the current page which has already beenrendered for printing, printers may place the content
- on another location on the current page,
- on a subsequent page, or
- may omit it.
Note that ablock-level element that is split over several pages may have a differentwidth on each page and that there may be device-specific limits.
Example(s):
With no positioning, the containing blocks (C.B.) in thefollowing document:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"><HTML> <HEAD> <TITLE>Illustration of containing blocks</TITLE> </HEAD> <BODY> <DIV> <P>This is text in the first paragraph...</P> <P>This is text <EM> in the <STRONG>second</STRONG> paragraph.</EM></P> </DIV> </BODY></HTML>
are established as follows:
| For box generated by | C.B. is established by |
|---|
| html | initial C.B. (UA-dependent) |
| body | html |
| div1 | body |
| p1 | div1 |
| p2 | div1 |
| em1 | p2 |
| strong1 | p2 |
If we position "div1":
#div1 { position: absolute; left: 50px; top: 50px }its containing block is no longer "body"; it becomesthe initial containing block (since there are noother positioned ancestor boxes).
If we position "em1" as well:
#div1 { position: absolute; left: 50px; top: 50px } #em1 { position: absolute; left: 100px; top: 100px }the table of containing blocks becomes:
| For box generated by | C.B. is established by |
|---|
| html | initial C.B. (UA-dependent) |
| body | html |
| div1 | initial C.B. |
| p1 | div1 |
| p2 | div1 |
| em1 | div1 |
| strong1 | em1 |
By positioning "em1", its containing block becomesthe nearest positioned ancestor box (i.e., that generatedby "div1").
- 'width'
| Value: | <length> |<percentage> | auto |inherit |
| Initial: | auto |
| Applies to: | all elements but non-replaced inline elements, table rows, and row groups |
| Inherited: | no |
| Percentages: | refer to width of containing block |
| Media: | visual |
| Computed value: | the percentage or 'auto' as specified or the absolute length |
This property specifies thecontent width of boxes.
This property does not apply to non-replacedinline elements. Thecontent widthof a non-replaced inline element's boxes is that of the renderedcontent within them (before any relative offset ofchildren). Recall that inline boxes flow intoline boxes. The width of line boxesis given by the theircontaining block, but may beshorted by the presence offloats.
Values have the following meanings:
- <length>
- Specifies the width of the content area using a length unit.
- <percentage>
- Specifies a percentage width. The percentage is calculatedwith respect to the width of the generated box'scontaining block.If the containing block's width depends on this element's width, thenthe resulting layout is undefined in CSS 2.1.Note: For absolutely positioned elements whose containing block isbased on a block container element, the percentage is calculated withrespect to the width of thepadding box of that element.This is a change from CSS1, where the percentage width was alwayscalculated with respect to thecontent box of the parentelement.
- auto
- The width depends on the values of other properties. See the sections below.
Negative values for'width' areillegal.
Example(s):
For example, the following rule fixes the content width of paragraphsat 100 pixels:
p { width: 100px }The values of an element's'width','margin-left','margin-right','left' and'right' properties as used for layoutdepend on the type of box generated and on each other. (The value usedfor layout is sometimes referred to as theused value.) Inprinciple, the values used are the same as the computed values, with'auto' replaced by some suitable value, and percentages calculatedbased on the containing block, but there are exceptions. The followingsituations need to be distinguished:
- inline, non-replaced elements
- inline, replaced elements
- block-level, non-replaced elements in normal flow
- block-level, replaced elements in normal flow
- floating, non-replaced elements
- floating, replaced elements
- absolutely positioned, non-replaced elements
- absolutely positioned, replaced elements
- 'inline-block', non-replaced elements in normal flow
- 'inline-block', replaced elements in normal flow
For Points 1-6 and 9-10, the values of 'left' and 'right' in thecase of relatively positioned elements are determined by the rules insection 9.4.3.
Note. The used value of 'width'calculated below is a tentative value, and may have to be calculatedmultiple times, depending on'min-width' and'max-width', see the sectionMinimum and maximum widths below.
The'width' property does notapply. A computed value of 'auto' for'margin-left' or'margin-right' becomes a usedvalue of '0'.
A computed value of 'auto' for'margin-left' or'margin-right' becomes a usedvalue of '0'.
If'height' and'width' both have computed values of'auto' and the element also has an intrinsic width, then thatintrinsic width is the used value of'width'.
If'height' and'width' both have computed values of'auto' and the element has no intrinsic width, but does have anintrinsic height and intrinsic ratio; or if'width' has a computed value of 'auto','height' has some other computedvalue, and the element does have an intrinsic ratio; then the usedvalue of'width' is:
(used height) * (intrinsic ratio)
If 'height' and'width' bothhave computed values of 'auto' and the element has an intrinsic ratiobut no intrinsic height or width, then the used value of 'width' isundefined in CSS 2.1.However, it is suggested that, if the containing block's widthdoes not itself depend on the replaced element's width, then the usedvalue of 'width' is calculated from the constraint equation used forblock-level, non-replaced elements in normal flow.
Otherwise, if'width' has acomputed value of 'auto', and the element has an intrinsic width, thenthat intrinsic width is the used value of'width'.
Otherwise, if'width' has acomputed value of 'auto', but none of the conditions above are met,then the used value of'width'becomes 300px. If 300px is too wide to fit the device, UAs should usethe width of the largest rectangle that has a 2:1 ratio and fits thedevice instead.
The followingconstraints must holdamong the used values of the other properties:
'margin-left' +'border-left-width' +'padding-left' +'width' +'padding-right' +'border-right-width' +'margin-right' = width ofcontaining block
If 'width' is not 'auto' and 'border-left-width' + 'padding-left' +'width' + 'padding-right' + 'border-right-width' (plus any of'margin-left' or 'margin-right' that are not 'auto') is larger thanthe width of the containing block, then any 'auto' values for'margin-left' or 'margin-right' are, for the following rules, treatedas zero.
Ifall of the above have a computed value other than 'auto', the valuesare said to be "over-constrained" and one of the used values willhave to be different from its computed value. If the'direction' property of the containing block has the value 'ltr', the specifiedvalue of'margin-right' is ignored and thevalue is calculated so as to make the equality true. If the value of'direction' is 'rtl', thishappens to'margin-left' instead.
If there is exactly one value specified as 'auto', its usedvalue follows from the equality.
If'width' is set to 'auto',any other 'auto' values become '0' and'width' follows from the resultingequality.
If both'margin-left' and'margin-right' are 'auto',their used values are equal. This horizontally centers the elementwith respect to the edges of the containing block.
The used value of'width' is determinedas forinline replaced elements.Then the rulesfor non-replacedblock-level elements are applied to determine the margins.
If'margin-left', or'margin-right' are computed as'auto', their used value is '0'.
If'width' is computed as'auto', the used value is the "shrink-to-fit" width.
Calculation of the shrink-to-fitwidth is similar to calculating the width of a table cell using theautomatic table layout algorithm. Roughly: calculate the preferredwidth by formatting the content without breaking lines other thanwhere explicit line breaks occur, and also calculate the preferredminimum width, e.g., by trying all possible line breaks.CSS 2.1 does not define the exact algorithm. Thirdly, find theavailable width: in this case, this is the width of thecontaining block minus the used values of 'margin-left','border-left-width', 'padding-left', 'padding-right','border-right-width', 'margin-right', and the widths of any relevantscroll bars.
Then the shrink-to-fit width is: min(max(preferred minimum width,available width), preferred width).
If'margin-left' or'margin-right' are computed as'auto', their used value is '0'. The used value of'width' is determined as forinline 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. Moreprecisely:
- Thestatic-position containing block is the containingblock of a hypothetical box that would have been the first box of theelement if its specified'position' value had been 'static'and its specified 'float' had been 'none'. (Note that due to the rulesinsection 9.7 thishypothetical calculation might require also assuming a differentcomputed value for 'display'.)
- The static position for 'left' is the distance from the left edgeof the containing block to the left margin edge of a hypothetical boxthat would have been the first box of the element if its'position' property had been 'static'and'float' had been 'none'. Thevalue is negative if the hypotheticalbox is to the left of the containing block.
- The static position for 'right' is the distance from the rightedge of the containing block to the right margin edge of the samehypothetical box as above. The value is positive if the hypotheticalbox is to the left of the containing block's edge.
But rather than actually calculating the dimensions of thathypothetical box, user agents are free to make a guess at its probableposition.
For the purposes of calculating the static position, the containingblock of fixed positioned elements is the initial containing blockinstead of the viewport, and all scrollable boxes should be assumed tobe scrolled to their origin.
The constraint that determines the used values for theseelements is:
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width'+ 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
If all three of 'left', 'width', and 'right' are 'auto': First setany 'auto' values for 'margin-left' and 'margin-right' to 0. Then, ifthe 'direction' property of the element establishing thestatic-position containing block is 'ltr' set 'left'to thestatic position and apply rule numberthree below; otherwise, set 'right' to thestatic position and apply rule numberone below.
If none of the three is 'auto': If both 'margin-left' and'margin-right' are 'auto', solve theequation under the extra constraint that the two margins get equalvalues, unless this would make them negative, in which case whendirection of the containing block is 'ltr' ('rtl'), set 'margin-left'('margin-right') to zeroand solve for 'margin-right' ('margin-left'). If one of'margin-left' or 'margin-right' is 'auto', solve the equation for thatvalue. If the values are over-constrained, ignore the value for 'left'(in case the 'direction' property of the containing block is 'rtl') or'right' (in case 'direction' is'ltr') and solve for that value.
Otherwise, set 'auto' values for 'margin-left' and 'margin-right'to 0, and pick the one of the following six rules that applies.
- 'left' and 'width' are 'auto' and 'right' is not 'auto', then thewidth is shrink-to-fit. Then solve for 'left'
- 'left' and 'right' are 'auto' and 'width' is not 'auto', then ifthe 'direction' property of the element establishing thestatic-position containing block is 'ltr' set 'left'to thestatic position, otherwise set 'right'to thestatic position. Then solvefor 'left' (if 'direction is 'rtl') or 'right' (if 'direction' is'ltr').
- 'width' and 'right' are 'auto' and 'left' is not 'auto', then thewidth is shrink-to-fit . Then solve for 'right'
- 'left' is 'auto', 'width' and 'right' are not 'auto', then solve for'left'
- 'width' is 'auto', 'left' and 'right' are not 'auto', then solvefor 'width'
- 'right' is 'auto', 'left' and 'width' are not 'auto', then solvefor 'right'
Calculation of the shrink-to-fit width is similar to calculatingthe width of a table cell using the automatic table layout algorithm.Roughly: calculate the preferred width by formatting the contentwithout breaking lines other than where explicit line breaks occur,and also calculate the preferredminimum width, e.g., bytrying all possible line breaks. CSS 2.1 does not define theexact algorithm. Thirdly, calculate theavailable width: thisis found by solving for 'width' after setting 'left' (in case 1) or'right' (in case 3) to 0.
Then the shrink-to-fit width is: min(max(preferred minimum width, availablewidth), preferred width).
In this case,section 10.3.7applies up through and including the constraint equation, but the restofsection 10.3.7 is replaced bythe following rules:
- The used value of'width' isdetermined as forinline replacedelements.If'margin-left' or'margin-right' is specified as'auto' its used value is determined by the rules below.
- If both'left' and'right' have the value 'auto', then ifthe 'direction' property of the element establishing thestatic-position containing block is 'ltr', set'left' tothe static position; else if 'direction' is 'rtl', set'right' to the static position.
- If'left' or'right' are 'auto', replace any 'auto'on'margin-left' or'margin-right' with '0'.
- If at this point both'margin-left' and'margin-right' are still 'auto',solve the equation under the extra constraint that the two marginsmust get equal values, unless this would make them negative, in whichcase when the direction of the containing block is 'ltr' ('rtl'), set'margin-left' ('margin-right') to zero and solvefor'margin-right' ('margin-left').
- If at this point there is an 'auto' left, solve the equation for that value.
- If at this point the values are over-constrained, ignore the valuefor either'left' (in case the'direction' property of thecontaining block is 'rtl') or'right' (in case'direction' is 'ltr') and solve forthat value.
If'width' is 'auto', theused value is theshrink-to-fitwidth as for floating elements.
A computed value of 'auto' for'margin-left' or'margin-right' becomes a usedvalue of '0'.
Exactly asinline replacedelements.
- 'min-width'
| 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 |
- 'max-width'
| Value: | <length> |<percentage> | none |inherit |
| Initial: | none |
| Applies to: | all elements but non-replaced inline elements, table rows, and row groups |
| Inherited: | no |
| Percentages: | refer to width of containing block |
| Media: | visual |
| Computed value: | the percentage as specified or the absolute length or 'none' |
These two properties allow authors to constrain content widths to acertain range. Values have the following meanings:
- <length>
- Specifies a fixed minimum or maximum used width.
- <percentage>
- Specifies a percentage for determining the used value. Thepercentage is calculated with respect to the width of the generatedbox'scontaining block.If the containing block's width is negative, the used value iszero.If the containing block's width depends on this element's width,then the resulting layout is undefined in CSS 2.1.
- none
- (Only on'max-width') Nolimit on the width of the box.
Negative values for'min-width' and'max-width' are illegal.
In CSS 2.1, the effect of 'min-width' and 'max-width' ontables, inline tables,table cells, table columns, and column groups is undefined.
The following algorithm describes how the two properties influencetheused valueof the'width' property:
- The tentative used width is calculated (without'min-width' and'max-width') following the rulesunder"Calculating widths andmargins" above.
- If the tentative used width is greater than'max-width', the rulesabove are applied again, butthis time using the computed value of'max-width' as the computed valuefor'width'.
- If the resulting width is smaller than'min-width', the rulesabove are applied again, butthis time using the value of'min-width' as the computed valuefor'width'.
These steps do not affect the real computed values ofthe above properties.
However, for replaced elements with an intrinsic ratio and both'width' and'height' specified as 'auto', thealgorithm is as follows:
Select from the table the resolved height and width values for theappropriate constraint violation. Take themax-width andmax-height as max(min, max) so thatmin ≤max holds true.In this tablew andh stand for the results ofthe width and height computations ignoring the'min-width','min-height','max-width' and'max-height' properties. Normallythese are the intrinsic width and height, but they may not be in thecase of replaced elements with intrinsic ratios.
Note: In cases where an explicit width or height isset and the other dimension is auto, applying a minimum or maximumconstraint on the auto side can cause an over-constrained situation. The spec is clear in the behavior but it might not be what the authorexpects. The CSS3 object-fit property can be used to obtain differentresults in this situation.
| Constraint Violation | Resolved Width | Resolved Height |
|---|
| none | w | h |
| w > max-width | max-width | max(max-width * h/w, min-height) |
| w < min-width | min-width | min(min-width * h/w, max-height) |
| h > max-height | max(max-height * w/h, min-width) | max-height |
| h < min-height | min(min-height * w/h, max-width) | min-height |
| (w > max-width) and (h > max-height), where (max-width/w ≤ max-height/h) | max-width | max(min-height, max-width * h/w) |
| (w > max-width) and (h > max-height), where (max-width/w > max-height/h) | max(min-width, max-height * w/h) | max-height |
| (w < min-width) and (h < min-height), where (min-width/w ≤ min-height/h) | min(max-width, min-height * w/h) | min-height |
| (w < min-width) and (h < min-height), where (min-width/w > min-height/h) | min-width | min(max-height, min-width * h/w) |
| (w < min-width) and (h > max-height) | min-width | max-height |
| (w > max-width) and (h < min-height) | max-width | min-height |
Then apply the rules under"Calculating widths andmargins" above, as if'width'were computed as this value.
- 'height'
| Value: | <length> |<percentage> | auto |inherit |
| Initial: | auto |
| Applies to: | all elements but non-replaced inline elements, table columns, and column groups |
| Inherited: | no |
| Percentages: | see prose |
| Media: | visual |
| Computed value: | the percentage or 'auto' (see prose under<percentage>) or the absolute length |
This property specifies thecontent height of boxes.
This property does not apply to non-replacedinline elements. See thesection on computing heights and marginsfor non-replaced inline elements for the rules used instead.
Values have the following meanings:
- <length>
- Specifies the height of the content area using a length value.
- <percentage>
- Specifies a percentage height. The percentage is calculated withrespect to the height of the generated box'scontaining block. If theheight of the containing block is not specified explicitly (i.e., itdepends on content height), and this element is not absolutelypositioned, the value computes to 'auto'. A percentage heighton theroot element is relative to theinitial containing block.Note: For absolutely positioned elements whose containing block isbased on a block-level element, the percentage is calculated withrespect to the height of thepadding box of that element.This is a change from CSS1, where the percentage was alwayscalculated with respect to thecontent box of the parentelement.
- auto
- The height depends on the values of other properties. See the prose below.
Note that the height of the containing block of anabsolutely positioned element is independent of the size of theelement itself, and thus a percentage height on such an element canalways be resolved. However, it may be that the height is not knownuntil elements that come later in the document have been processed.
Negative values for'height'are illegal.
Example(s):
For example, the following rule sets the content height of paragraphsto 100 pixels:
p { height: 100px }Paragraphs of which the height of the contents exceeds 100 pixelswilloverflow according to the'overflow' property.
For calculating the values of'top','margin-top','height','margin-bottom', and'bottom' a distinction must be made betweenvarious kinds of boxes:
- inline, non-replaced elements
- inline, replaced elements
- block-level, non-replaced elements in normal flow
- block-level, replaced elements in normal flow
- floating, non-replaced elements
- floating, replaced elements
- absolutely positioned, non-replaced elements
- absolutely positioned, replaced elements
- 'inline-block', non-replaced elements in normal flow
- 'inline-block', replaced elements in normal flow
For Points 1-6 and 9-10, the used values of 'top' and'bottom' are determined by the rules in section 9.4.3.
Note: these rules apply tothe root element just as to any other element.
Note. The used value of 'height'calculated below is a tentative value, and may have to be calculatedmultiple times, depending on'min-height' and'max-height', see the sectionMinimum and maximum heights below.
The'height' property does notapply. The height of the content area should be based on the font, butthis specification does not specify how. A UA may, e.g., use theem-box or the maximum ascender and descender of the font. (The latterwould ensure that glyphs with parts above or below the em-box stillfall within the content area, but leads to differently sized boxes fordifferent fonts; the former would ensure authors can controlbackground styling relative to the 'line-height', but leads to glyphspainting outside their content area.)
Note: level 3 of CSS will probably include a property toselect which measure of the font is used for the content height.
The vertical padding, border and margin of an inline, non-replacedbox start at the top and bottom of the content area, and has nothingto do with the'line-height'. But only the'line-height' is used when calculatingthe height of the line box.
If more than one font isused (this could happen when glyphs are found in different fonts), theheight of the content area is not defined by this specification.However, we suggest that the height is chosen such that the contentarea is just high enough for either (1) the em-boxes, or (2) themaximum ascenders and descenders, ofall the fonts in theelement. Note that this may be larger than any of the font sizesinvolved, depending on the baseline alignment of the fonts.
10.6.2Inline replaced elements,block-level replaced elements in normal flow, 'inline-block' replacedelements in normal flow and floating replaced elements
If'margin-top', or'margin-bottom' are 'auto',their used value is 0.
If'height' and'width' both have computed values of'auto' and the element also has an intrinsic height, then thatintrinsic height is the used value of'height'.
Otherwise, if'height' has acomputed value of 'auto', and the element has an intrinsic ratio thenthe used value of'height' is:
(used width) / (intrinsic ratio)
Otherwise, if'height' has acomputed value of 'auto', and the element has an intrinsic height,then that intrinsic height is the used value of'height'.
Otherwise, if'height' has acomputed value of 'auto', but none of the conditions above are met,then the used value of'height'must be set to the height of the largest rectangle that has a 2:1ratio, has a height not greater than 150px, and has a width notgreater than the device width.
This section also applies to block-level non-replaced elements innormal flow when 'overflow' does not compute to 'visible' but has beenpropagated to the viewport.
If'margin-top', or'margin-bottom' are 'auto',their used value is 0. If'height' is 'auto', the height dependson whether the element has any block-level children and whether it haspadding or borders:
The element's height is the distance from its top content edge tothe first applicable of the following:
- the bottom edge of the last line box, if the box establishes a inline formatting context with one or more lines
- the bottom edge of the bottom (possibly collapsed) margin of its last in-flow child, if the child's bottom margin does not collapse with the element's bottom margin
- the bottom border edge of the last in-flow child whose top margin doesn't collapse with the element's bottom margin
- zero, otherwise
Only children in the normal flow are taken into account (i.e.,floating boxes and absolutely positioned boxes are ignored, andrelatively positioned boxes are considered without their offset). Notethat the child box may be ananonymous block box.
For the purposes of this section and the next, the term "staticposition" (of an element) refers, roughly, to the position an elementwould have had in the normal flow. More precisely, the static positionfor 'top' is the distance from the top edge of the containing block tothe top margin edge of a hypothetical box that would have been thefirst box of the element if its specified'position' value had been 'static'and its specified'float' had been'none' and its specified'clear'had been 'none'. (Note that due to the rulesinsection 9.7 this mightrequire also assuming a different computed value for 'display'.)The value is negative if the hypothetical box is above the containingblock.
But rather than actually calculating the dimensions of thathypothetical box, user agents are free to make a guess at its probableposition.
For the purposes of calculating the static position, the containingblock of fixed positioned elements is the initial containing blockinstead of the viewport.
For absolutely positioned elements, the used values of the verticaldimensions must satisfy this constraint:
'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height'+ 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom'= height of containing block
If all three of 'top', 'height', and 'bottom' are auto, set 'top'to the static position and apply rule number three below.
If none of the three are 'auto': If both 'margin-top' and'margin-bottom' are 'auto', solve the equation under the extraconstraint that the two margins get equal values. If one of'margin-top' or 'margin-bottom' is 'auto', solve the equation for thatvalue. If the values are over-constrained, ignore the value for'bottom' and solve for that value.
Otherwise, pick the one of the following six rules thatapplies.
- 'top' and 'height' are 'auto' and 'bottom' is not 'auto', then theheight isbased on the content per 10.6.7, set 'auto'values for 'margin-top' and 'margin-bottom' to 0, and solve for 'top'
- 'top' and 'bottom' are 'auto' and 'height' is not 'auto', thenset 'top' to the static position, set 'auto' values for 'margin-top'and 'margin-bottom' to 0, and solve for 'bottom'
- 'height' and 'bottom' are 'auto' and 'top' is not 'auto', then theheight isbased on the content per 10.6.7, set 'auto'values for 'margin-top' and 'margin-bottom' to 0, and solve for'bottom'
- 'top' is 'auto', 'height' and 'bottom' are not 'auto', then set'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for'top'
- 'height' is 'auto', 'top' and 'bottom' are not 'auto', then 'auto'values for 'margin-top' and 'margin-bottom' are set to 0 and solve for'height'
- 'bottom' is 'auto', 'top' and 'height' are not 'auto', then set'auto' values for 'margin-top' and 'margin-bottom' to 0 and solve for'bottom'
This situation is similar to the previous one, except that theelement has anintrinsic height. Thesequence of substitutions is now:
- The used value of'height' is determined as forinline replaced elements.If 'margin-top' or 'margin-bottom' is specified as 'auto' its usedvalue is determined by the rules below.
- If both'top' and'bottom' have the value 'auto', replace'top' with the element'sstatic position.
- If'bottom' is 'auto',replace any 'auto' on'margin-top' or'margin-bottom' with '0'.
- If at this point both'margin-top' and'margin-bottom' are still'auto', solve the equation under the extra constraint that the twomargins must get equal values.
- If at this point there is only one 'auto' left, solve the equation for that value.
- If at this point the values are over-constrained, ignore the valuefor'bottom' and solve for thatvalue.
This section applies to:
- Block-level, non-replaced elements in normal flow when 'overflow' does not compute to 'visible' (except if the 'overflow' property's value has been propagated to the viewport).
- 'Inline-block', non-replaced elements.
- Floating, non-replaced elements.
If'margin-top', or'margin-bottom' are 'auto',their used value is 0. If'height' is 'auto', theheight depends on the element's descendants per 10.6.7.
For 'inline-block' elements, the margin box is used when calculatingthe height of the line box.
In certain cases (see, e.g., sections10.6.4 and10.6.6 above), the height of anelement that establishes a block formatting context is computed as follows:
If it only has inline-level children, the height is the distancebetween the top of the topmost line box and the bottom of thebottommost line box.
If it has block-level children, the height is the distance betweenthe top margin-edge of the topmost block-level child box and thebottom margin-edge of the bottommost block-level child box.
Absolutely positioned children are ignored, and relativelypositioned boxes are considered without their offset. Note that thechild box may be ananonymous block box.
In addition, if the element has any floating descendantswhose bottom margin edge is below the element's bottom content edge,then the height is increased to include those edges.Only floats that participate in this block formatting context are taken into account,e.g., floats inside absolutely positioned descendants or other floats are not.
It is sometimes useful to constrain the height of elements to acertain range. Two properties offer this functionality:
- 'min-height'
| Value: | <length> |<percentage> |inherit |
| Initial: | 0 |
| Applies to: | all elements but non-replaced inline elements, table columns, and column groups |
| Inherited: | no |
| Percentages: | see prose |
| Media: | visual |
| Computed value: | the percentage as specified or the absolute length |
- 'max-height'
| Value: | <length> |<percentage> | none |inherit |
| Initial: | none |
| Applies to: | all elements but non-replaced inline elements, table columns, and column groups |
| Inherited: | no |
| Percentages: | see prose |
| Media: | visual |
| Computed value: | the percentage as specified or the absolute length or 'none' |
These two properties allow authors to constrain box heights to acertain range. Values have the following meanings:
- <length>
- Specifies a fixed minimum or maximum computed height.
- <percentage>
- Specifies a percentage for determining the used value.The percentage is calculated with respect to the height of thegenerated box'scontaining block.If the height of the containing block is not specified explicitly (i.e., it depends on content height), and thiselement is not absolutely positioned, thepercentage value is treated as '0' (for'min-height') or 'none'(for'max-height').
- none
- (Only on'max-height') No limit on the height of the box.
Negative values for'min-height' and'max-height' are illegal.
In CSS 2.1, the effect of 'min-height' and 'max-height' ontables, inline tables, table cells, table rows, and row groups is undefined.
The following algorithm describes how the two properties influencetheused valueof the'height' property:
- The tentative used height is calculated (without'min-height' and'max-height') following the rulesunder"Calculating heights andmargins" above.
- If this tentative height is greater than'max-height', the rulesabove are applied again, butthis time using the value of'max-height' as the computed valuefor'height'.
- If the resulting height is smaller than'min-height', the rulesabove are applied again, butthis time using the value of'min-height' as the computed valuefor'height'.
These steps do not affect the real computed values ofthe above properties. The change of used'height' has no effect on margincollapsing 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 thealgorithm underMinimum and maximumwidths above to find the used width and height. Then apply therules under"Computingheights and margins" above, using the resulting width and height asif they were the computed values.
As described in the section oninline formatting contexts,user agents flow inline-level boxes into a vertical stack ofline boxes. The height of a line boxis determined as follows:
- The height of each inline-level box in the line box is calculated.For replaced elements, inline-block elements, and inline-tableelements, this is the height of their margin box; for inline boxes,this is their 'line-height'.(See"Calculating heights andmargins" and theheight of inlineboxes in"Leading and half-leading".)
- The inline-level boxes are aligned vertically accordingto their'vertical-align'property.In case they are aligned 'top' or 'bottom', they must be aligned so asto minimize the line box height. If such boxes are tall enough, thereare multiple solutions and CSS 2.1 does not define the positionof the line box's baseline (i.e., the position of thestrut, see below).
- The line box height is the distance between the uppermostbox top and the lowermost box bottom. (This includes thestrut, as explained under'line-height' below.)
Empty inline elements generate empty inline boxes, but these boxesstill have margins, padding, borders and a line height, and thusinfluence these calculations just like elements with content.
CSS assumes that every font has font metrics that specify acharacteristic height above the baseline and a depth below it. In thissection we useA to mean that height (for a given font at agiven size) andD the depth. We also defineAD =A +D, the distance from the top to thebottom. (See the note below forhow to findA andD for TrueType and OpenType fonts.)Note that these are metrics of the font as a whole and need notcorrespond to the ascender and descender of any individual glyph.
User agent must align the glyphs in a non-replaced inline box toeach other by their relevant baselines. Then, foreach glyph, determine theA andD. Note thatglyphs in a single element may come from different fonts and thus neednot all have the sameA andD. If the inline boxcontains no glyphs at all, it is considered to contain astrut (an invisible glyph of zero width) with theA andD of the element's first available font.
Still for each glyph, determine the leadingL to add,whereL ='line-height' -AD. Halfthe leading is added aboveA and the other half belowD, giving the glyph and its leading a total height abovethe baseline ofA' =A +L/2 and atotal depth ofD' =D +L/2.
Note.L may be negative.
The height of the inline box encloses allglyphs and their half-leading on each side and is thus exactly'line-height'. Boxes ofchild elements do not influence this height.
Although margins, borders, and padding of non-replaced elements donot enter into the line box calculation, they are still renderedaround inline boxes. This means that if the height specified by'line-height' is less than thecontent height of contained boxes, backgrounds and colors of paddingand borders may "bleed" into adjoining line boxes. User agents shouldrender the boxes in document order. This will cause the borders onsubsequent lines to paint over the borders and text of previous lines.
Note. CSS 2.1 does not definewhat the content area of an inline box is (see10.6.1 above) and thus different UAsmay draw the backgrounds and borders in different places.
Note. It isrecommended that implementations that use OpenType or TrueType fontsuse the metrics "sTypoAscender" and "sTypoDescender" from the font'sOS/2 table for A and D (after scaling to the current element's fontsize). In the absence of these metrics, the "Ascent" and "Descent"metrics from the HHEA table should be used.
On ablock container elementwhose contentis composed ofinline-levelelements, 'line-height' specifies theminimal height of line boxeswithin the element. The minimum height consists of a minimum height abovethe baseline and a minimum depth below it, exactly as if eachline box starts with azero-width inline box with theelement's font and line height properties. We call that imaginarybox a "strut." (The name is inspired by TeX.).
The height and depth of the font above and below the baseline areassumed to be metrics that are contained in the font. (For moredetails, see CSS level 3.)
On a non-replacedinline element, 'line-height'specifies the height that is used in the calculation of the line boxheight.
Values for this property have the following meanings:
- normal
- Tells user agents to set the usedvalue to a "reasonable" value based on the font of the element. Thevalue has the same meaning as<number>. We recommend aused value for 'normal' between 1.0 to 1.2. Thecomputed value is 'normal'.
- <length>
- The specified length is used in the calculation of the line boxheight. Negative values are illegal.
- <number>
- The used value of the property is this number multiplied by theelement's font size. Negative values are illegal. Thecomputed value is the same asthe specified value.
- <percentage>
- Thecomputed value of theproperty is this percentage multiplied by the element's computed font size. Negative values are illegal.
Example(s):
The three rules in the example below have the same resultant line height:
div { line-height: 1.2; font-size: 10pt } /* number */div { line-height: 1.2em; font-size: 10pt } /* length */div { line-height: 120%; font-size: 10pt } /* percentage */When an element contains text that is renderedin more than one font, user agents may determine the 'normal''line-height' value according tothe largest font size.
Note. When there is only one value of'line-height' for all inlineboxes in a block container box and they are all in the same font (andthere are no replaced elements, inline-blockelements, etc.), the above will ensure thatbaselines of successive lines are exactly'line-height' apart. This isimportant when columns of text in different fonts have to be aligned,for example in a table.
- 'vertical-align'
| Value: | baseline | sub | super | top | text-top | middle | bottom | text-bottom |<percentage> |<length> |inherit |
| Initial: | baseline |
| Applies to: | inline-level and 'table-cell' elements |
| Inherited: | no |
| Percentages: | refer to the 'line-height' of the element itself |
| Media: | visual |
| Computed value: | for<percentage> and<length> the absolute length, otherwise as specified |
This property affects the vertical positioning inside a line box ofthe boxes generated by an inline-level element.
Note. Values of this property havedifferent meanings in the context of tables.Please consult the section ontable height algorithms for details.
The following values only have meaning with respect to a parentinline element, or to thestrut of a parentblock container element.
In the following definitions, for inline non-replaced elements, thebox used for alignment is the box whose height is the 'line-height'(containing the box's glyphs and the half-leading on each side, seeabove). For all other elements, the boxused for alignment is the margin box.
- baseline
- Align the baseline of the box with the baseline of the parent box. If the box does not have a baseline, align the bottom margin edge with the parent's baseline.
- middle
- Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.
- sub
- Lower the baseline of the box to the proper position for subscripts of the parent's box. (This value has no effect on the font size of the element's text.)
- super
- Raise the baseline of the box to the proper position for superscripts of the parent's box. (This value has no effect on the font size of the element's text.)
- text-top
- Align the top of the box with the top of the parent's content area (see10.6.1).
- text-bottom
- Align the bottom of the box with the bottom of the parent's content area (see10.6.1).
- <percentage>
- Raise (positive value) or lower (negative value) the box by this distance (a percentage of the'line-height' value). The value '0%' means the same as 'baseline'.
- <length>
- Raise (positive value) or lower (negative value) the box by this distance. The value '0cm' means the same as 'baseline'.
The following values align the element relative to the line box.Since the element may have children aligned relative to it (which inturn may have descendants aligned relative to them), these values usethe bounds of the aligned subtree. Thealigned subtree ofan inline element contains that element and the aligned subtrees ofall children inline elements whose computed 'vertical-align' value isnot 'top' or 'bottom'. The top of the aligned subtree is the highestof the tops of the boxes in the subtree, and the bottom is analogous.
- top
- Align the top of the aligned subtree with the top of the line box.
- bottom
- Align the bottom of the aligned subtree with the bottom of the line box.
The baseline of an 'inline-table' is the baseline of the first rowof the table.
The baseline of an 'inline-block' is the baseline of its last linebox in the normal flow, unless it has either no in-flow line boxes orif its 'overflow' property has a computed value other than 'visible',in which case the baseline is the bottom margin edge.
[8]ページ先頭