In the inline formatting context the inline-level boxes are placed into a vertical stack of line-boxes the height of which is defined as follows:

  1. For replaced elements (images, objects...), inline-block elements and inline-table elements the height will be the height of their margin box while for inline boxes, the height will be their line-height property.
  2. The inline-level boxes are aligned vertically according to their vertical-align property. In case of them being aligned top or bottom they must be aligned so as to minimize the line box height.
  3. The line-box height is the distance between the uppermost box top and the lowermost box bottom.

Setting line height

The line-height property is used to specify the height of the boxes within an element.

The line-height property contains following information:

  1. value: normal, <number>, <length>, <percentage> or inherit;
  2. initial: normal;
  3. applies to: all elements;
  4. inherited: yes;
  5. percentages: refers to the font size of the element;
  6. media: visual;
  7. computed value: for <length> and <percentage> the absolute value otherwise as specified.

In case of a block-level element whose content is made of inline-level elements the line-height specify the minimum height of the line boxes inside the element. Such a minimum height consists of a minimum height above the baseline and a minimum depth below it. The height and depth of the font above and below the baseline are assumed to be metrics contained in the font.

In case of a non-replaced inline element, the line-height specifies the height that is used in the calculation of the line box height.

The value normal tells browsers to set the height to a value based on the font of the element; the meaning is the same as in value number. The values length and percentage are values calculated typically for those data types.

If an element contains text in more then one font, the browser might use the font size as the normal line height for that element.

Setting vertical alignment

The vertical-align property is used to specify the vertical positioning inside a line box of the boxes generated by an inline-level element.

The vertical-align property contains following information:

  1. value: baseline, sub, super, top, text-top, middle, bottom, text-bottom, <length>, <percentage> or inherit;
  2. initial: baseline;
  3. applies to: inline-level and table-cell elements;
  4. inherited: no;
  5. percentages: refers to the line-height of the element;
  6. media: visual;
  7. computed value: for <length> and <percentage> the absolute value otherwise as specified.

For the meaning of these values in the context of tables, please refer to the "CSS Tables" chapter, otherwise the values have following meanings:

  • baseline aligns baseline of the box with the baseline of the parent box; if the box has no baseline, align the bottom margin edge with the parent's baseline;
  • middle aligns the vertical midpoint of the box with the baseline of the parent box plus the half x-height of the parent;
  • sub lowers the baseline of the box to the proper position for subscripts of the parent's box (has no effect to the font size);
  • sup raises the baseline of the box to the proper position for superscripts of the parent's box (has no effect to the font size);
  • text-top aligns the top of the box with the top of the parent's content area;
  • text-bottom aligns the bottom of the box with the bottom of the parent's content area.

The values top and bottom refer to the whole descendant tree of the main line box in sense that the value top aligns the top of the aligned sub tree with the top of the line box and the value bottom analogically to the other direction.

The other two values, expressed as <length> or <percentage>, will raise or lower the box by the given distance. The values, i.e., "0cm"or "0%" mean the same as value baseline.

The baseline of an inline-table is the baseline of the first row of the table while the baseline of inline-block is the baseline of its last inline box in the normal flow, unless it has either no in-flow line boxes or if its overflow value has a computed value other then visible in which case the baseline will be the bottom margin-edge.

Example

Example with CSS line height and vertical alignment:

 

›› go to examples ››