Contents
The containing block for a box other than the root box is determined as follows:
When a containing block is established by a block box, it has the same width, height, and position as the box's padding edge. The edges are called the top, bottom, left, and right of the containing block.
When a containing block is established by an inline-level element, it has the same width, height, and position as the padding edge of the first (in the source tree) inline box generated by the inline-level element.
Relatively positioned inline boxes must be considered specially since (1) the rendered content of an inline-level element may not be rectangular in shape but (2) a relatively positioned box establishes a new containing block and containing blocks must be rectangular. The reference edges for descendants are the following:
Box and line box widths and heights may be established in one of several ways:
The sections below describe these calculations in detail.
As discussed in the section on box dimensions, the content width of a box is assigned explicitly (via the 'width' property), given "intrinsically" (for replaced elements), or calculated "top-down" (based on the width of the box's containing block).
The following sections explain the exact computation of a box's width-related properties.
| 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 |
This property specifies the content width of a block box. Values have the following meanings:
Negative values for 'width' are illegal. User agents must ignore this property for elements with 'display' set to 'row' or 'row-span'.
For example, the following rule fixes the width of paragraphs to 100 pixels:
P { width: 100px }
The 'width' property does not apply to non-replaced inline-level elements. These elements generate boxes that 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.
For other types of boxes in the normal flow and for floats, a box's margin, padding, border, and content width must equal the width of its containing block. These widths are specified with the following seven properties: 'margin-left', 'border-left', 'padding-left', 'width', 'padding-right', 'border-right', and 'margin-right'. However, if the 'border-style' for an element has the value 'none', the corresponding border widths will be '0'.
Three of these properties ('margin-left', 'width', and 'margin-right') may take the value 'auto'. Their computed values are determined as follows.
When the 'width' property has the value 'auto', user agents should assign it a computed value based on computed margin widths. In addition:
User agents should assign computed values for 'margin-left', 'width', and 'margin-right' as follows:
The width of an absolutely positioned box may be computed in three ways:
In cases one and two, for left-to-right formatting, values of 'left' and 'right' are computed as follows:
In case three, for left-to-right formatting, values of 'left', 'right', and 'width' are computed as follows:
For all of the above cases, analogous rules hold for right-to-left formatting, switching right and left.
| Value: | <length> | <percentage> | inherit |
| Initial: | 0 |
| Applies to: | all |
| Inherited: | no |
| Percentages: | refer to width of containing block |
| Media: | visual |
| Value: | <length> | <percentage> | inherit |
| Initial: | 100% |
| Applies to: | all |
| Inherited: | no |
| Percentages: | refer to width of containing block |
| Media: | visual |
These two properties allow authors to constrain box widths to a certain range. Values have the following meanings:
The following algorithm describes how the two properties influence the computed value of the 'width' property:
The user agent may define a non-negative minimum value for the 'width' property, which may vary from element to element and even depend on other properties. If 'width' goes below this limit, either because it was set explicitly, or because it was 'auto' and the rules below would make it too small, the user agent may use the minimum value as the computed value.
As discussed in the section on box dimensions, the content height of a box is assigned explicitly (via the 'height' property), given "intrinsically" (for replaced elements), or calculated as the minimal height necessary to include the vertical content of the element and that of all its flowed children. This is the height necessary before any relative offset of children.
The following sections explain the exact computation of a box's height-related properties.
| 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 |
This property specifies a box's content height. Values have the following meanings:
Negative values for 'height' are illegal. User agents must ignore this property for elements with 'display' set to 'col' or 'column-span'.
For example, the following rule fixes the height of paragraphs to 100 pixels:
P { height: 100px }
Paragraphs that require more than 100 pixels of height will overflow according to the 'overflow' property.
The height may be enforced by the user interface (e.g., a scrollbar).
When the 'height' property has the value 'auto', user agents should assign it a computed value based on the space required by the element's rendered content. In addition:
The height of an absolutely positioned box may be computed in three ways:
In cases one and two, values of 'top' and 'bottom' are computed as follows:
In case three, the values of 'top', 'bottom', and 'height' are computed as follows:
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 |
| Inherited: | no |
| Percentages: | refer to height of containing block |
| Media: | visual |
| Value: | <length> | <percentage> | inherit |
| Initial: | 100% |
| Applies to: | all |
| Inherited: | no |
| Percentages: | refer to height of containing block |
| Media: | visual |
These two properties allow authors to constrain box heights to a certain range. Values have the following meanings:
The following algorithm describes how the two properties influence the computed value of the 'height' property:
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 along a common baseline, the line box top and bottom may not touch the top and bottom of the tallest box.
Note that top and bottom margins, borders, and padding specified for inline-level elements do not enter into the calculation of line box heights but are visible (inside and outside line boxes).
Since the height of an inline box may be different from the font size of text in the box (e.g., 'line-height' > 1em), there may be space above and below rendered glyphs. The difference between the font size and the (actual) value of 'line-height' is called the leading. Half the leading is called the half-leading.
User agents center the glyph vertically in the box, adding half-leading on the top and bottom. For example, if a piece of text is '12pt' high and the 'line-height' value is '14pt', 2pts of extra space should be added: 1pt above and 1pt below the letters. (This applies to empty boxes as well, as if the empty box contained an infinitely narrow letter.)
When the 'line-height' value is less than the font size, the final line 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 adjacent line box.
Although margins, borders, and padding do not enter into the line box height calculation, they are still rendered around inline boxes (except where boxes are split across lines). This means that if the height of a line box is shorter than the outer edges of the boxes it contains, backgrounds and colors may "bleed" into adjacent line boxes. However, in this case, some user agents may use the line box to "clip" the border and padding areas (i.e., not render them).
| Value: | normal | <number> | <length> | <percentage> | inherit |
| Initial: | normal |
| Applies to: | all elements |
| Inherited: | yes |
| Percentages: | relative to the font size of the element itself |
| Media: | visual |
If the property is set on a block-level element whose content is composed of inline-level elements, it specifies the minimal height of each inline box.
If the property is set on an inline-level element, it specifies the exact height of each box generated by the element. (Except for inline replaced elements, where the height of the box is given by the 'height' property.)
Values for this property have the following meanings:
Note that replaced elements have a 'font-size' and a 'line-height' property, even if they are not used directly to determine the height of the box. The 'font-size' is, however, used to define the 'em' and 'ex' units, and the 'line-height' has a role in the 'vertical-align' property.
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 should 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 |
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 vertical alignment of table context for details.
The remaining values refer to the line box in which the generated box appears: