10 Visual rendering model details

Contents

10.1 Details of containing block calculation

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:

10.2 Calculation of box and line box widths

Box and line box widths and heights may be established in one of several ways:

Width and height properties set explicitly
If 'width' or 'height' is set explicitly (i.e., not 'auto'), the box will have the specified width or height, except in tables, where a 'width' or 'height' is interpreted as a minimum size, or even ignored, depending on the table layout algorithm. The 'width' and 'height' properties do not apply to non-replaced inline elements.
Block box widths are calculated top-down
The width of a block box is given by the width of its containing block minus the box's margins, borders, and padding.
Inline box widths are calculated bottom-up
The width of an inline box is given by its rendered content.
Block box heights are calculated bottom-up
Block level boxes grow to the size of the boxes they contain (unless the 'height' property is set). Please consult the section on box height calculations for details.
Inline box heights are given by the 'line-height' property
Please consult the section on box height calculations for details.
Line heights depend on inline box heights and alignment
Please consult the section on line height calculations for details.
Intrinsic dimension of replaced content
The rendered content of a replaced element may have "intrinsic dimensions" that user agents use as the computed content width and height (e.g., the unscaled width and height of an included image). If the intrinsic dimensions are overridden, the replaced content is scaled by the user agent. When scaling an element with intrinsic dimensions, the aspect ratio is preserved if values for the 'width' and 'height' properties are set to 'auto'.
Hybrid calculations
The dimension of a table cell is determined by both the cell's contents and the surrounding available space.

The sections below describe these calculations in detail.

10.3 Box width calculations

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.

10.3.1 Content width: the 'width' property

'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

This property specifies the content width of a block box. Values have the following meanings:

<length>
Specifies a fixed width.
<percentage>
Specifies a percentage width. The percentage is calculated with respect to width of the generated box's containing block.
auto
See the section on widths of boxes in the normal flow and floated boxes.

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 }

10.3.2 Width of boxes in the normal flow and floated boxes

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.

Determining the content width

When the 'width' property has the value 'auto', user agents should assign it a computed value based on computed margin widths. In addition:

  1. For inline-level elements and those that generate floating boxes, the computed value of 'width' is '0'.
  2. For replaced elements, user agents should use the intrinsic width of the element's rendered content as the box's computed width. (Note that for other values of 'width', the replaced contents may be scaled).
  3. Minimum and maximum computed values for the 'width' property may be assigned with the 'min-width' and 'max-width' properties.

Computing margin widths

User agents should assign computed values for 'margin-left', 'width', and 'margin-right' as follows:

  1. If exactly one of 'margin-left', 'width' or 'margin-right' has the value 'auto', the computed value of that property is assigned so that the seven width properties add up to the width of the containing block.
  2. If none of the properties has the value 'auto', 'margin-right' is assigned a computed value so that the seven width properties add up to the width of the containing block.
  3. If more than one of the three has the value 'auto', and one of them is 'width', than the other two ('margin-left' and/or 'margin-right') will be assigned the computed value '0' and 'width' will be assigned a computed value so that the seven width properties add up to the width of the containing block.
  4. Otherwise, if both 'margin-left' and 'margin-right' have the value 'auto', they will each be assigned a computed value that is half of the available horizontal space (this centers the box within its containing block).

10.3.3 Width of absolutely positioned boxes

The width of an absolutely positioned box may be computed in three ways:

  1. The element generating the box has a value other than 'auto' for the 'width' property.
  2. The element is a replaced element with an intrinsic width and 'width' has the value 'auto'.
  3. The width is given by the difference between the 'left' and 'right' offsets (minus padding, borders, and margins). When padding, border, and margin properties have the specified value 'auto', the computed value is '0'.

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.

10.3.4 Minimum and maximum widths: 'min-width' and 'max-width'

'min-width'
Value:  <length> | <percentage> | inherit
Initial:  0
Applies to:  all
Inherited:  no
Percentages:  refer to width of containing block
Media:  visual
'max-width'
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:

<length>
Specifies a fixed minimum or maximum computed width.
<percentage>
Specifies a percentage for determining the computed value. The percentage is calculated with respect to the width of the generated box's containing block.

The following algorithm describes how the two properties influence the computed value of the 'width' property:

  1. the normal width is computed (without 'min-width' and 'max-width').
  2. if the computed value of 'min-width' is greater than the value of 'max-width', 'max-width' is set to the value of 'min-width'.
  3. if the computed width is greater than 'max-width', the computed value of 'width' is set to the value of 'max-width'.
  4. if the computed width is smaller than 'min-width', the computed value of 'width' is set to the value of 'min-width'.

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.

10.4 Box height calculations

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.

10.4.1 Content height: the 'height' property

'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

This property specifies a box's content height. Values have the following meanings:

<length>
Specifies a fixed height.
<percentage>
Specifies a percentage height. The percentage is calculated with respect to the width of the generated box's containing block.
auto
See the section on heights of boxes in the normal flow and floated boxes.

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).

10.4.2 Determining the content height

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:

  1. For replaced elements, user agents should use the intrinsic height of the element's rendered content as the box's computed height. (Note that for other values of 'height', the replaced contents may be scaled).
  2. Minimum and maximum computed values for the 'height' property may be assigned with the 'min-height' and 'max-height' properties.

10.4.3 Height of absolutely positioned boxes

The height of an absolutely positioned box may be computed in three ways:

  1. The element generating the box has a value other than 'auto' for the 'height' property.
  2. The element is a replaced element with an intrinsic height and 'height' has the value 'auto'.
  3. The height is given by the different between the 'top' and 'bottom' offsets (minus padding, borders, and margins). When padding, border, and margin properties have the specified value 'auto', the computed value is '0'. In this case, the height of the box's containing block must be known, otherwise the 'bottom' of the box cannot be specified and the height is undefined.

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:

10.4.4 Minimum and maximum heights: 'min-height' and 'max-height'

It is sometimes useful to constrain the height of elements to a certain range. Two properties offer this functionality:

'min-height'
Value:  <length> | <percentage> | inherit
Initial:  0
Applies to:  all
Inherited:  no
Percentages:  refer to height of containing block
Media:  visual
'max-height'
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:

<length>
Specifies a fixed minimum or maximum computed height.
<percentage>
Specifies a percentage for determining the computed value. The percentage is calculated with respect to the generated box's containing block.

The following algorithm describes how the two properties influence the computed value of the 'height' property:

  1. the normal height is computed (without 'min-height' and 'max-height').
  2. if the value of 'min-height' is greater than the value of 'max-height', 'max-height' is set to the value of 'min-height'
  3. if the calculated height is greater than 'max-height', the value of 'height' is set to 'max-height'.
  4. if the calculated height is smaller than 'min-height', the value of 'height' is set to 'min-height'.

10.5 Line height calculations: the 'line-height' and 'vertical-align' properties

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:

  1. The height of each inline box in the line box is calculated. The height of an inline box is given by its 'line-height' property, unless it is generated by a replaced element, in which case the 'height' property gives the height of the inline box.
  2. The inline boxes are aligned vertically according to their 'vertical-align' property. If an element has the values 'top' or 'bottom' for this property, only the height of the generated boxes affects the line box height calculation; the boxes cannot be aligned until the line box has been fully constructed.
  3. The line box height is the distance between the uppermost box top and the lowermost box bottom.

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).

10.5.1 Leading and half-leading

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).

'line-height'
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:

normal
Tells user agents to set the computed value to a "reasonable" value based on the font size of the element. The value has the same meaning as <number> We recommend a number between 1.0 to 1.2.
<length>
The box height is set to this length. Negative values are illegal.
<number>
The computed value of the property is this number multiplied by the element's font size. Negative values are illegal. However, the number, not the actual value, is inherited.
<percentage>
The actual value of the property is this percentage multiplied by the element's font size. Negative values are illegal.

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.

'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

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.

baseline
Align the baseline of the box with the baseline of the parent box. If the box doesn't have a baseline, align the bottom of the box 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 element's font.
text-bottom
Align the bottom of the box with the bottom of the parent element's font.
<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 remaining values refer to the line box in which the generated box appears:

top
Align the top of the box with the top of the line box.
bottom
Align the bottom of the box with the bottom of the line box.