10 Visual formatting model details

Contents

10.1 Definition of "containing block"

The position and size of an element's box(es) are sometimes computed relative to a certain rectangle, called the containing block of the element. The containing block of an element is defined as follows:

  1. The containing block in which the root element lives is chosen by the user agent. (It could be related to the viewport.) This containing block is called the initial containing block.
  2. For other elements, if the element's position is 'relative' or 'static', the containing block is formed by the content edge of the nearest block-level, table cell or inline-block ancestor box.
  3. If the element has 'position: fixed', the containing block is established by the viewport.
  4. If the element has 'position: absolute', the containing block is established by the nearest ancestor with a 'position' of 'absolute', 'relative' or 'fixed', in the following way:
    1. In the case that the ancestor is block-level, the containing block is formed by the padding edge of the ancestor.
    2. In the case that the ancestor is inline-level, the containing block depends on the 'direction' property of the ancestor:
      1. If the 'direction' is 'ltr', the top and left of the containing block are the top and left content edges of the first box generated by the ancestor, and the bottom and right are the bottom and right content edges of the last box of the ancestor.
      2. If the 'direction' is 'rtl', the top and right are the top and right edges of the first box generated by the ancestor, and the bottom and left are the bottom and left content edges of the last box of the ancestor.

    If there is no such ancestor, the containing block is the initial containing block.

Example(s):

With no positioning, the containing blocks (C.B.) in the following document:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
   <HEAD>
      <TITLE>Illustration of containing blocks</TITLE>
   </HEAD>
   <BODY id="body">
      <DIV id="div1">
      <P id="p1">This is text in the first paragraph...</P>
      <P id="p2">This is text <EM id="em1"> in the 
      <STRONG id="strong1">second</STRONG> paragraph.</EM></P>
      </DIV>
   </BODY>
</HTML>

are established as follows:

For box generated by C.B. is established by
htmlinitial C.B. (UA-dependent)
bodyhtml
div1body
p1div1
p2div1
em1p2
strong1p2

If we position "div1":

   #div1 { position: absolute; left: 50px; top: 50px }

its containing block is no longer "body"; it becomes the initial containing block (since there are no other positioned ancestor boxes).

If we position "em1" as well:

   #div1 { position: absolute; left: 50px; top: 50px }
   #em1  { position: absolute; left: 100px; top: 100px }

the table of containing blocks becomes:

For box generated by C.B. is established by
htmlinitial C.B. (UA-dependent)
bodyhtml
div1initial C.B.
p1div1
p2div1
em1div1
strong1em1

By positioning "em1", its containing block becomes the nearest positioned ancestor box (i.e., that generated by "div1").

10.2 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
Computed value:  absolute length; 'auto' if the property does not apply

This property specifies the content width of boxes generated by block-level and replaced elements.

This property does not apply to non-replaced inline-level elements. The content width of a non-replaced inline element's boxes is that of the rendered content within them (before any relative offset of children). Recall that inline boxes flow into line boxes. The width of line boxes is given by the their containing block, but may be shorted by the presence of floats.

The width of a replaced element's box is intrinsic and may be scaled by the user agent if the value of this property is different than 'auto'.

Values have the following meanings:

<length>
Specifies the width of the content area using a length unit.
<percentage>
Specifies a percentage width. The percentage is calculated with respect to the width of the generated box's containing block.
auto
The width depends on the values of other properties. See the sections below.

Negative values for 'width' are illegal.

Example(s):

For example, the following rule fixes the content width of paragraphs at 100 pixels:

p { width: 100px }

10.3 Computing widths and margins

The computed values of an element's 'width', 'margin-left', 'margin-right', 'left' and 'right' properties depend on the type of box generated and on each other. In principle, the computed values are the same as the specified values, with 'auto' replaced by some suitable value, but there are exceptions. The following situations need to be distinguished:

  1. inline, non-replaced elements
  2. inline, replaced elements
  3. block-level, non-replaced elements in normal flow
  4. block-level, replaced elements in normal flow
  5. floating, non-replaced elements
  6. floating, replaced elements
  7. absolutely positioned, non-replaced elements
  8. absolutely positioned, replaced elements
  9. 'inline-block', non-replaced elements in normal flow
  10. 'inline-block', replaced elements in normal flow

Points 1-6 and 9-10 include relative positioning.

10.3.1 Inline, non-replaced elements

The 'width' property does not apply. A specified value of 'auto' for 'left', 'right', 'margin-left' or 'margin-right' becomes a computed value of '0'.

10.3.2 Inline, replaced elements

A specified value of 'auto' for 'left', 'right', 'margin-left' or 'margin-right' becomes a computed value of '0'. If 'width' has a specified value of 'auto' and 'height' also has a specified value of 'auto', the element's intrinsic width is the computed value of 'width'. If 'width' has a specified value of 'auto' and 'height' has some other specified value, then the computed value of 'width' is:

 (intrinsic width) * ( (computed height) / (intrinsic height) )

10.3.3 Block-level, non-replaced elements in normal flow

If 'left' or 'right' are given as 'auto', their computed value is 0. The following constraints must hold between the other properties:

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block

(If the border style is 'none', use '0' as the border width.) If all of the above have a specified value other than 'auto', the values are said to be "over-constrained" and one of the computed values will have to be different from its specified value. If the 'direction' property has the value 'ltr', the specified value of 'margin-right' is ignored and the value is computed so as to make the equality true. If the value of 'direction' is 'rtl', this happens to 'margin-left' instead.

If there is exactly one value specified as 'auto', its computed value follows from the equality.

If 'width' is set to 'auto', any other 'auto' values become '0' and 'width' follows from the resulting equality.

If both 'margin-left' and 'margin-right' are 'auto', their computed values are equal. This horizontally centers the element with respect to the edges of the containing block.

10.3.4 Block-level, replaced elements in normal flow

If 'left' or 'right' are 'auto', their computed value is 0. The computed value of 'width' is determined as for inline replaced elements. If one of the margins is 'auto', its computed value is given by the constraints above. Furthermore, if both margins are 'auto', their computed values are equal.

10.3.5 Floating, non-replaced elements

If 'left', 'right', 'margin-left', or 'margin-right' are specified as 'auto', their computed value is '0'.

If 'width' is specified as 'auto', the computed value is the "shrink-to-fit" width.

Calculation of the shrink-to-fit width is similar to computing the width of a table cell using the automatic table layout algorithm. Roughly: calculate the preferred width by formatting the content without breaking lines other than where explicit line breaks occur, and also calculate the preferred minimum width, e.g., by trying all possible line breaks. CSS 2.1 does not define the exact algorithm. Thirdly, compute the available width: in this case, this is the width of the containing block minus 'left', 'right', 'margin-left' and 'margin-right'. (Omit 'left' and 'right' if they do not apply to this element.)

Then the shrink-to-fit width is: min(max(preferred minimum width, available width), preferred width).

10.3.6 Floating, replaced elements

If 'left', 'right', 'margin-left' or 'margin-right' are specified as 'auto', their computed value is '0'. The computed value of 'width' is determined as for inline replaced elements.

10.3.7 Absolutely positioned, non-replaced elements

For the purposes of this section and the next, the term "static position" (of an element) refers, roughly, to the position an element would have had in the normal flow. More precisely:

But rather than actually computing that hypothetical box, user agents are free to make a guess at its probable position.

The constraint that determines the computed values for these elements is:

'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block

If all three of 'left', 'width', and 'right' are 'auto': if 'direction' is 'ltr' set 'left' to the static position and apply rule number three below; otherwise, set 'right' to the static position and apply rule number one below.

If none of the three is 'auto': If both 'margin-left' and 'margin-right' are 'auto', solve the equation under the extra constraint that the two margins get equal values. If one of 'margin-left' or 'margin-right' is 'auto', solve the equation for that value. If the values are over-constrained, ignore the value for 'left' (in case 'direction' 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.

  1. 'left' and 'width' are 'auto' and 'right' is not 'auto', then the width is shrink-to-fit. Then solve for 'left'
  2. 'left' and 'right' are 'auto' and 'width' is not 'auto', then if 'direction' is 'ltr' set 'left' to the static position, otherwise set 'right' to the static position. Then solve for 'left' (if 'direction is 'rtl') or 'right' (if 'direction' is 'ltr').
  3. 'width' and 'right' are 'auto' and 'left' is not 'auto', then the width is shrink-to-fit . Then solve for 'right'
  4. 'left' is 'auto', 'width' and 'right' are not 'auto', then solve for 'left'
  5. 'width' is 'auto', 'left' and 'right' are not 'auto', then solve for 'width'
  6. 'right' is 'auto', 'left' and 'width' are not 'auto', then solve for 'right'

Calculation of the shrink-to-fit width is similar to computing the width of a table cell using the automatic table layout algorithm. Roughly: calculate the preferred width by formatting the content without breaking lines other than where explicit line breaks occur, and also calculate the preferred minimum width, e.g., by trying all possible line breaks. CSS 2.1 does not define the exact algorithm. Thirdly, compute the available width: this is computed by solving for 'width' after setting 'left' (in case 1) or 'right (in case 3) to 0.

Then the shrink-to-fit width is: min(max(preferred minimum width, available width), preferred width).

10.3.8 Absolutely positioned, replaced elements

This situation is similar to the previous one, except that the element has an intrinsic width. The sequence of substitutions is now:

  1. The computed value of 'width' is determined as for inline replaced elements.
  2. If 'left' has the value 'auto' while 'direction' is 'ltr', replace 'auto' with the static position.
  3. If 'right' has the value 'auto' while 'direction' is 'rtl', replace 'auto' with the static position.
  4. If 'left' or 'right' are 'auto', replace any 'auto' on 'margin-left' or 'margin-right' with '0'.
  5. If at this point both 'margin-left' and 'margin-right' are still 'auto', solve the equation under the extra constraint that the two margins must get equal values.
  6. If at this point there is only one 'auto' left, solve the equation for that value.
  7. If at this point the values are over-constrained, ignore the value for either 'left' (in case 'direction' is 'rtl') or 'right' (in case 'direction' is 'ltr') and solve for that value.

10.3.9 'Inline-block', non-replaced elements in normal flow

If 'width' is 'auto', the computed value is the shrink-to-fit width as for floating elements.

A specified value of 'auto' for 'left', 'right', 'margin-left' or 'margin-right' becomes a computed value of '0'.

10.3.10 'Inline-block', replaced elements in normal flow

Exactly as inline replaced elements.

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

'min-width'
Value:  <length> | <percentage> | inherit
Initial:  0
Applies to:  all elements except non-replaced inline elements and table elements
Inherited:  no
Percentages:  refer to width of containing block
Media:  visual
Computed value:  absolute length
'max-width'
Value:  <length> | <percentage> | none | inherit
Initial:  none
Applies to:  all elements except non-replaced inline elements and table elements
Inherited:  no
Percentages:  refer to width of containing block
Media:  visual
Computed value:  absolute length or 'none'

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.
none
(Only on 'max-width') No limit on the width of the box.

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

  1. The width is computed (without 'min-width' and 'max-width') following the rules under "Computing widths and margins" above.
  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 rules above are applied again, but this time using the value of 'max-width' as the specified value for 'width'.
  4. If the computed width is smaller than 'min-width', the rules above are applied again, but this time using the value of 'min-width' as the specified value for 'width'.

The user agent may define a non-negative minimum value for the 'min-width' property, which may vary from element to element and even depend on other properties. If 'min-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.5 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
Computed value:  absolute length; 'auto' if the property does not apply

This property specifies the content height of boxes generated by block-level, inline-block and replaced elements.

This property does not apply to non-replaced inline-level elements. The height of a non-replaced inline element's boxes is given by the element's (possibly inherited) 'line-height' value.

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 with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not positioned, the value is interpreted like 'auto'.
auto
The height depends on the values of other properties. See the prose below.

A UA may compute a percentage height on the root element relative to the viewport.

Negative values for 'height' are illegal.

Example(s):

For example, the following rule sets the content height of paragraphs to 100 pixels:

p { height: 100px }

Paragraphs of which the height of the contents exceeds 100 pixels will overflow according to the 'overflow' property.

10.6 Computing heights and margins

For computing the values of 'top', 'margin-top', 'height', 'margin-bottom', and 'bottom' a distinction must be made between various kinds of boxes:

  1. inline, non-replaced elements
  2. inline, replaced elements
  3. block-level, non-replaced elements in normal flow
  4. block-level, replaced elements in normal flow
  5. floating, non-replaced elements
  6. floating, replaced elements
  7. absolutely positioned, non-replaced elements
  8. absolutely positioned, replaced elements
  9. 'inline-block', non-replaced elements in normal flow
  10. 'inline-block', replaced elements in normal flow

Points 1-6 and 9-10 include relative positioning.

10.6.1 Inline, non-replaced elements

If 'top' or 'bottom' are 'auto', their computed value is 0.

The 'height' property doesn't apply. The height of the content area should be based on the font, but this specification does not specify how. A UA may, e.g., use the em-box or the maximum ascender and descender of the font. (The latter would ensure that glyphs with parts above or below the em-box still fall within the content area, but leads to differently sized boxes for different fonts.)

Note: level 3 of CSS will probably include a property to select which measure of the font is used for the content height.

The vertical padding, border and margin of an inline, non-replaced box start at the top and bottom of the content area, not the 'line-height'. But only the 'line-height' is used to compute the height of the line box.

If more than one font is used (this could happen when glyphs are found in different fonts), the height of the content area is not defined by this specification. However, we suggest that the height is chosen such that the content area is just high enough for either (1) the em-boxes or (2) the maximum ascenders and descenders of all the fonts in the element. Note that this may be larger than any of the font sizes involved, depending on the baseline alignment of the fonts.

10.6.2 Inline replaced elements, block-level replaced elements in normal flow, 'inline-block' replaced elements in normal flow and floating replaced elements

If 'top', 'bottom', 'margin-top', or 'margin-bottom' are 'auto', their computed value is 0. If 'height' has a specified value of 'auto' and 'width' also has a specified value of 'auto', the element's intrinsic height is the computed value of 'height'. If 'height' has a specified value of 'auto' and 'width' has some other specified value, then the computed value of 'height' is:

    (intrinsic height) * ( (computed width) / (intrinsic width) )

10.6.3 Block-level and 'inline-block', non-replaced elements in normal flow and floating, non-replaced elements

If 'top', 'bottom', 'margin-top', or 'margin-bottom' are 'auto', their computed value is 0. If 'height' is 'auto', the height depends on whether the element has any block-level children and whether it has padding or borders.

If it only has inline-level children, the height is the distance between the top of the topmost line box and the bottom of the bottommost line box.

If it has block-level children, the height is the distance between the top border-edge of the topmost block-level child box and the bottom border-edge of the bottommost block-level child box. However, if the element has a non-zero top padding and/or top border, then the content starts at the top margin edge of the topmost child. (The first case expresses the fact that the top and bottom margins of the element collapse with those of the topmost and bottommost children, while in the second case the presence of the padding/border prevents the top margins from collapsing.) Similarly, if the element has a non-zero bottom padding and/or bottom border, then the content ends at the bottom margin edge of the bottommost child.

Only children in the normal flow are taken into account (i.e., floating boxes and absolutely positioned boxes are ignored, and relatively positioned boxes are considered without their offset). Note that the child box may be an anonymous block box.

10.6.4 Absolutely positioned, non-replaced elements

For the purposes of this section and the next, the term "static position" (of an element) refers, roughly, to the position an element would have had in the normal flow. More precisely, the static position for 'top' is the distance from the top edge of the containing block to the top margin edge of a hypothetical box that would have been the first box of the element if its 'position' property had been 'static'. The value is negative if the hypothetical box is above the containing block.

But rather than actually computing that hypothetical box, user agents are free to make a guess at its probable position.

For absolutely positioned elements, the vertical dimensions must satisfy this constraint:

'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = 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 extra constraint that the two margins get equal values. If one of 'margin-top' or 'margin-bottom' is 'auto', solve the equation for that value. 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 that applies.

  1. 'top' and 'height' are 'auto' and 'bottom' is not 'auto', then the height is based on the content, set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'top'
  2. 'top' and 'bottom' are 'auto' and 'height' is not 'auto', then set 'top' to the static position, set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'bottom'
  3. 'height' and 'bottom' are 'auto' and 'top' is not 'auto', then the height is based on the content, set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'bottom'
  4. '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'
  5. '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'
  6. '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'

10.6.5 Absolutely positioned, replaced elements

This situation is similar to the previous one, except that the element has an intrinsic height. The sequence of substitutions is now:

  1. The computed value of 'height' is determined as for inline replaced elements.
  2. If 'top' has the value 'auto', replace it with the element's static position.
  3. If 'bottom' is 'auto', replace any 'auto' on 'margin-top' or 'margin-bottom' with '0'.
  4. If at this point both 'margin-top' and 'margin-bottom' are still 'auto', solve the equation under the extra constraint that the two margins must get equal values.
  5. If at this point there is only one 'auto' left, solve the equation for that value.
  6. If at this point the values are over-constrained, ignore the value for 'bottom' and solve for that value.

10.7 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 elements except non-replaced inline elements and table elements
Inherited:  no
Percentages:  refer to height of containing block
Media:  visual
Computed value:  absolute length
'max-height'
Value:  <length> | <percentage> | none | inherit
Initial:  none
Applies to:  all elements except non-replaced inline elements and table elements
Inherited:  no
Percentages:  refer to height of containing block
Media:  visual
Computed value:  absolute length or 'none'

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 height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), the percentage value computes to '0' (for 'min-height') or 'none' (for 'max-height').
none
(Only on 'max-height') No limit on the height of the box.

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

  1. The height is computed (without 'min-height' and 'max-height') following the rules under "Computing heights and margins" above.
  2. If the computed 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 computed height is greater than 'max-height', the rules above are applied again, but this time using the value of 'max-height' as the specified value for 'height'.
  4. If the computed height is smaller than 'min-height', the rules above are applied again, but this time using the value of 'min-height' as the specified value for 'height'.

10.8 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 (see "Computing heights and margins" and the 'line-height' property).
  2. The inline boxes are aligned vertically according to their 'vertical-align' property.
  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.

10.8.1 Leading and half-leading

Since the value of 'line-height' may be different from the height of the content area there may be space above and below rendered glyphs. The difference between the content height and the computed value of 'line-height' is called the leading. Half the leading is called the half-leading.

User agents center glyphs vertically in an inline box, adding half-leading on the top and bottom. For example, if a piece of text is '12pt' 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 content height, the final inline box height will be less than the font size and the rendered glyphs will "bleed" outside the box. If such a box touches the edge of a line box, the rendered glyphs will also "bleed" into the adjacent line box.

Although margins, borders, and padding of non-replaced elements do not enter into the line box calculation, they are still rendered around inline boxes. This means that if the height specified by 'line-height' is less than the content height of contained boxes, backgrounds and colors of padding and borders 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). User agents should render the boxes in document order. This will cause the borders on subsequent lines to paint over the borders and text of previous lines.

'line-height'
Value:  normal | <number> | <length> | <percentage> | inherit
Initial:  normal
Applies to:  all elements
Inherited:  yes
Percentages:  refer to the font size of the element itself
Media:  visual
Computed value:  for <length> and <percentage> the absolute value; otherwise as specified

If the property is set on a block-level element whose content is composed of inline-level elements, it specifies the minimal height of line boxes within the element. The minimum height consist of a minimum height above the block's baseline and a minimum depth below it, exactly as if each line box starts with a zero-width inline box with the block's font and line height properties (what TEX calls a "strut").

If the property is set on an inline-level element, it specifies the height that is used in the calculation of the line box height (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 of the element. The value has the same meaning as <number>. We recommend a computed value for 'normal' between 1.0 to 1.2.
<length>
The specified length is used in the calculation of the line box height. 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 computed value, is inherited.
<percentage>
The computed value of the property 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 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
Computed value:  for <percentage> and <length> the absolute length, otherwise as specified

This property affects the vertical positioning inside a line box of the boxes generated by an inline-level element. The following values only have meaning with respect to a parent inline-level element, or to a parent block-level element.

Note. Values of this property have slightly different meanings in the context of tables. Please consult the section on table height algorithms 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 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 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'.
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.