9 Visual rendering model details

9.1 Margin, border, and padding properties

The following sections include the definitions of box properties and other details about box generation.

9.1.1 Margin properties: 'margin-top', 'margin-right', 'margin-bottom', 'margin-left', and 'margin'

Margin properties specify the width of the margin area of a box. The 'margin' shorthand property sets the margin for all four sides while the other margin properties only set their respective side. These properties apply to all elements generating block-level boxes \ that are not absolutely positioned and they apply to elements for which 'display' is set to 'caption'.

The properties defined in this section refer to the <margin-width> value type, which may take one of the following values:

<length>

Specifies a fixed width.

<percentage>

Specifies a percentage width. The percentage is calculated with respect to the generated box's containing block.

auto

See the section on box width calculations for behavior.

Negative values for margin properties are allowed, but there may be implementation-specific limits. Percentage values for margin properties refer to the width of the generated box's containing block.

This property sets the top margin of a generated box.

  H1 { margin-top: 2em }

This property sets the right margin of a generated box.

  H1 { margin-right: 12.3% }

This property sets the bottom margin of a generated box.

  H1 { margin-bottom: 3px }

This property sets the left margin of a generated box.

  H1 { margin-left: 2em }

The 'margin' property is a shorthand property for setting 'margin-top', 'margin-right' 'margin-bottom' and 'margin-left' at the same place in the style sheet.

If there is only one value, it applies to all sides. If there are two values, the top and bottom margins are set to the first value and the right and left margins are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values, they apply to the top, right, bottom, and left, respectively.

  BODY { margin: 2em } /* all margins set to 2em */
  BODY { margin: 1em 2em } /* top & bottom = 1em, right & left = 2em */
  BODY { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */

  BODY {
    margin-top: 1em;
    margin-right: 2em;
    margin-bottom: 3em;
    margin-left: 2em;        /* copied from opposite side (right) */
  }

9.1.2 Padding properties: 'padding-top', 'padding-right', 'padding-bottom', 'padding-left', and 'padding'

The padding properties specify the width of the content area of a box. The 'padding' shorthand property sets the padding for all four sides while the other padding properties only set their respective side. These properties apply to all elements.

The properties defined in this section refer to the <padding-width> value type, which may take one of the following values:

<length>

Specifies a fixed width.

<percentage>

Specifies a percentage width. The percentage is calculated with respect to the generated box's containing block.

Unlike margin properties, values for padding values cannot be negative. Like margin properties, percentage values for padding properties refer to the width of the generated box's containing block.

This property sets the top padding of a generated box.

  BLOCKQUOTE { padding-top: 0.3em }

This property sets the right padding of a generated box.

  BLOCKQUOTE { padding-right: 10px }

This property sets the bottom padding of a generated box.

  BLOCKQUOTE { padding-bottom: 2em }

This property sets the left padding of a generated box.

  BLOCKQUOTE { padding-left: 20% }

The 'padding' property is a shorthand property for setting 'padding-top', 'padding-right', 'padding-bottom', and 'padding-left' at the same place in the style sheet.

If there is only one value, it applies to all sides. If there are two values, the top and bottom paddings are set to the first value and the right and left paddings are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values, they apply to the top, right, bottom, and left, respectively.

The surface color or image of the padding area is specified via the 'background' property:

  H1 { 
    background: white; 
    padding: 1em 2em;
  } 

9.1.3 Border properties

The border properties specify the width, color, and style of the border area of a box. These properties apply to all elements.

Border width: 'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width', and 'border-width'

The border width properties specify the width of the border area. The properties defined in this section refer to the <border-width> value type, which may take one of the following values:

thin

A thin border.

medium

A medium border.

thick

A thick border.

<length>

The border's thickness has an explicit value. Explicit border widths cannot be negative.

The interpretation of the first three values depends on the user agent. The following relationships must hold, however:

'thin' <='medium' <= 'thick'.

Furthermore, these widths must be constant throughout a document.

This property sets the width of the top border of a box.

  H1 { border: solid thick red }
  P  { border: solid thick blue }

  H1 { border: solid 0.5em }

This property sets the width of the right border of a box.

This property sets the width of the bottom border of a box.

This property sets the width of the left border of a box.

This property is a shorthand property for setting 'border-top-width', 'border-right-width', 'border-bottom-width', and 'border-left-width' at the same place in the style sheet.

If there is only one value, it applies to all sides. If there are two values, the top and bottom borders are set to the first value and the right and left are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values, they apply to the top, right, bottom, and left, respectively.

  H1 { border-width: thin }                   /* thin thin thin thin */
  H1 { border-width: thin thick }             /* thin thick thin thick */
  H1 { border-width: thin thick medium }      /* thin thick medium thick */

Border color: 'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color', and 'border-color'

The border color properties specify the color of a box's border.

The 'border-color' property sets the color of the four borders. 'border-color' can have from one to four values, and the values are set on the different sides as for 'border-width'.

If an element's border color is not specified with a border property, user agents must use the value of the element's 'color' property as the computed value for the border color.

  P { 
    color: black; 
    background: white; 
    border: solid;
  }

Border style: 'border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style', and 'border-style'

The border style properties specify the line style of a box's border (solid, double, dashed, etc.). The properties defined in this section refer to the <border-style> value type, which make take one of the following:

none

No border.

hidden

Same as 'none', except in tables.

dotted

The border is a series of dots.

dashed

The border is a series of short line segments.

solid

The border is a single line segment.

double

The border is two solid lines. The sum of the two lines and the space between them equals the value of 'border-width'.

groove

The border looks as though it were carved into the canvas.

ridge

The opposite of 'grove': the border looks as though it were coming out of the canvas.

inset

The border makes the entire box look as though it were embedded in the canvas.

outset

The opposite of 'inset': the order makes the entire box look as though it were coming out of the canvas.

All borders are drawn on top of the box's background. The color of borders drawn for values of 'groove', 'ridge', 'inset', and 'outset' depends on the element's 'color' property.

Conforming HTML user agents may interpret 'dotted', 'dashed', 'double', 'groove', 'ridge', 'inset', and 'outset' to be 'solid'.

The 'border-style' property sets the style of the four borders. It can have from one to four values, and the values are set on the different sides as for 'border-width' above.

  #xy34 { border-style: solid dotted }

Since the initial value of the border styles is 'none', no borders will be visible unless the border style is set.

Border shorthand properties: 'border-top', 'border-bottom', 'border-right', 'border-left', and 'border'

This is a shorthand property for setting the width, style, and color of the top border of a box.

  H1 { border-bottom: thick solid red }

  H1 { border-bottom: thick solid }

Note that while the 'border-style' property accepts up to four values, this property only accepts one style value.

This is a shorthand property for setting the width, style, and color of the bottom border of a box. Otherwise, it behaves like 'border-top'.

This is a shorthand property for setting the width, style, and color of the right border of a box. Otherwise, it behaves like 'border-top'.

This is a shorthand property for setting the width, style, and color of the left border of a box. Otherwise, it behaves like 'border-top'.

The 'border' property is a shorthand property for setting the same width, color, and style for all four borders of a box. Unlike the shorthand 'margin' and 'padding' properties, the 'border' property cannot set different values on the four borders. To do so, one or more of the other border properties must be used. Note that while the 'border-width' property accepts up to four length values, this property only accepts one.

  P { border: solid red }
  P {
    border-top: solid red;
    border-right: solid red;
    border-bottom: solid red;
    border-left: solid red
  }

Since, to some extent, the properties have overlapping functionality, the order in which the rules are specified is important.

  BLOCKQUOTE {
    border-color: red;
    border-left: double;
    color: black
  }

9.2 Containing blocks

In CSS2, all box positions are calculated with respect to the edges of a rectangular box called a containing block.

The root of the document tree generates a box that serves as the initial containing block for subsequent layout. If the 'width' property for the root element has the value 'auto', the user agent supplies an initial width (e.g., the user agent uses the current width of the viewport).

The initial containing block cannot be positioned (i.e., user agents skip the 'position' property) or floated (i.e., user agents skip the 'float' property).

The containing block for an box other than the root box determined as follows:

• If the value of the 'position' property for the parent element is anything but 'normal' then the containing block is established by the parent box.
• Otherwise, if the value of the 'display' property for the parent element is anything but 'inline' then the containing block is established by the parent box.
• Otherwise, the containing block is the parent's containing block.

When the containing block is established by a block-level box, it has the same width, height, and position as the parent's padding edge. When the containing block is established by an inline box, it has the same width, height, and position as the padding edge of the first line box generated by the inline box.

Relatively positioned inline boxes must be considered specially since (1) the rendered content of an inline 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:

• For left-to-right scripts, the left and top edges are those of the first line box. The bottom and right edges are undefined in this case.
• For right-to-left scripts, the right and top edges are those of the first line box. The bottom and left edges are undefined in this case.

9.3 Box width calculations

As discussed in the section on box dimensions, the content width of a box is either assigned explicitly (via the 'width' property) or calculated "top-down" (based on box dimensions and the available horizontal space of its containing block). The following sections explain the exact computation of a box's width-related properties.

9.3.1 Content width: the 'width' property

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

<length>

Specifies a fixed width.

<percentage>

Specifies a percentage width. The percentage is calculated with respect to 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 skip this property for elements with 'display' set to 'row' or 'row-span'

  IMG.icon { width: 100px }

9.3.2 Widths of boxes in the normal flow and floated boxes

The 'width' property does not apply to non-replaced inline elements. The width of the line boxes is determined by their containing block.

For other types of boxes in the normal flow and 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'.

Three of these properties ('margin-left', 'width', and 'margin-right') may take the value 'auto'. All properties with 'auto' values must be assigned computed values by the user agent during layout. User agents must assign computed values 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 elements and those that generate floating boxes, the computed value 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. Authors (and user agents) may specify minimum and maximum computed values for the 'width' property via 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).

9.3.3 Width of absolutely positioned elements

The width of an absolutely positioned box is specified via the source element's 'width' property.

However, if the 'width' property has the value 'auto', the width of the box is given by the 'left' and 'right' properties. Note that these take the place of the 'margin-left' and 'margin-right' properties, which don't apply to absolutely positioned elements.

If all three properties have the value 'auto', the box has exactly the width of its containing block.

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

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 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' should be 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'.

9.4 Box height calculations

As discussed in the section on box dimensions, the content height of a box is either assigned explicitly (via the 'height' property) or is 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.

9.4.1 Content height: the 'height' property

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 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 skip this property for elements with 'display' set to 'col' or 'column-span'

  IMG.icon { height: 100px }

The height may be enforced by the user interface (e.g., a scrollbar).

9.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. Authors (and user agents) may specify minimum and maximum computed values for the 'height' property via the 'min-height' and 'max-height' properties.

9.4.3 Height of absolutely positioned elements

The height of an absolutely positioned box is specified via the source element's 'height' property. However, specifying a percentage value for 'height' when the parent element's height is set to 'auto' results in undefined behavior.

If the 'height' has the value 'auto', the height of the box is given by the 'top' and 'bottom' properties. Note that these take the place of the 'margin-top' and 'margin-bottom' properties, which don't apply to absolutely positioned elements.

If all three properties have the value 'auto', the box has exactly the height of its containing block.

9.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:

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' should be 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'.

9.5 Collapsing margins

In CSS2, horizontal margins never collapse.

Vertical margins may collapse for certain types of boxes:

• Two or more adjoining vertical margins (i.e., with no border, padding, or content between them) of block-level boxes in the normal flow collapse. The resulting margin width is the maximum of the adjoining margin widths. In the case of negative margins, the absolute maximum of the negative adjoining margins is deducted from the maximum of the positive adjoining margins. If there are no positive margins, the absolute maximum of the negative adjoining margins is deducted from zero.
• Vertical margins between a floating box and another box do not collapse.
• Vertical margins between an absolutely positioned boxes do not collapse.

In most cases, after collapsing the vertical margins, the result is visually more pleasing and closer to what the designer expects. Please consult the examples of margin, padding, and borders for an illustration of collapsed margins.

9.6 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 the 'line-height' property. The height is generally proportional to the font size of text in the box.

   In the case of an inline replaced element, the 'height' property determines the height of the inline box.

2. The inline boxes are aligned vertically according to the 'vertical-align' property value for source inline elements. 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 distance between the uppermost box top and the lowermost box bottom.

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 elements do not enter into the calculation of line box heights.

9.6.1 Leading and half-leading

Since the height of an inline box may be greater than ('line-height' > 1) the font size of text in the box, there may be space above and below rendered glyphs. The difference between the font size and the computed value of 'line-height' is called the leading. Half the leading is called the half-leading.

User agents should 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 (e.g., 1pt above and 1pt below the box). Empty elements influence these calculations just like elements with content.

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

The property specifies the height of an inline box. The height generally refers to the font size of the element's text. For replaced elements, the height refers to the intrinsic height.

• If the property is set on a block-level element whose content is composed of inline elements, it specifies the minimal height of each inline box.
• If the property is set on an inline element, it specifies the exact height of each box generated by the element.

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 value in the range of 1.0 to 1.2.

<length>

The box height is set to this length. Negative values are illegal.

<number>

This number is actual value for the property (and thus, it is inherited). The computed value of the property is this number multiplied by the element's font size. Negative values are illegal.

<percentage>

The actual value of the property is this percentage multiplied by the element's font size. Negative values are legal. Percentages raise the baseline of the element (or the bottom, if it has no baseline) the specified amount above the baseline of the parent. For example, a value of '-100%' will lower the element so that the baseline of the element ends up where the baseline of the next line should have been. This allows precise control over the vertical position of elements (such as images that are used in place of letters) that don't have a baseline.

  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.

This property affects the vertical positioning inside a line box of the boxes generated by an inline element. The following values only have meaning with respect to a parent inline element; they have no effect if no parent exists:

'baseline'

Align the baseline of text in the box with the baseline of text in the parent box. If the box doesn't contain text, align the bottom of the box with the parent's baseline.

'middle'

Align the vertical midpoint of the box with the baseline of text in the parent box plus half the x-height of the parent.

'sub'

Subscript the box. This value has no effect on the font size of the element's text.

'super'

Superscript the element. 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

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.

9.7 Floating constraints

A floating box is positioned subject to the following constraints:

1. The left outer edge of a left-floating box may not be to the left of the left inner edge of its containing block. Analogous rules hold for right-floating elements.
2. The left outer edge of a left-floating box must be to the right of the right outer edge of every preceding left-floating box or the top of the former must be lower than the bottom of the latter. Analogous rules hold for right-floating boxes.
3. The right outer edge of a left-floating box may not be to the right of the left outer edge of any right-floating box that is to the right of it. Analogous rules hold for right-floating elements.
4. A floating box's top may not be higher than the inner top of its containing block.
5. The top of an element's floating box may not be higher than the top of any block-level or floated box generated by a preceding element.
6. The top of an element's floating box may not be higher than the top of any line-box containing a box generated by a preceding element.
7. A floating box must be placed as high as possible.
8. A left-floating box must be put as far to the left as possible, a right-floating box as far to the right as possible. A higher position is preferred over one that is further to the left/right.