This site is designed for accessibility. Content is obtainable and functional to any browser or Internet device. This site's full visual experience is available in a graphical browser that supports web standards. Please consider upgrading your web browser.

Inline Layout Definitions and Notes

Term Meaning
Baseline The initial value of vertical-align property. Baseline means that text of any size will have its baseline aligned with the overall basline for the line. Images will have their bottom edge rest on the baseline, since that's what the value baseline is defined to mean for images (or any other replaced element).
Border

A property that allows an author to specify the width, color, and style of the border area (between any specified padding and margins) of an element's rendering box.

The border property does not influence the line height of a non-replaced element.

The border property does influence the line height of a replaced element.

Computed value

The transformation of a relative value into an absolute value. Values with relative units (em, ex, px) must be made absolute by multiplying with the appropriate font or pixel size, 'auto' values must be computed by the formulas given with each property, certain keywords ('smaller', 'bolder', 'inherit') must be replaced according to their definitions. In most cases, elements inherit computed values.

The computed value of "percentage" for vertifcal-align are calculated with respect to the value of line-height for the element, and moved accordingly. Thus:

sup {font-size: 8px; line-height: 14px; vertical-align: 50%;}

...will lead to any sup element being raised by 7px. If an element doesn't have an explicit line-height value set, then it will use whatever value it inherits from its parent-- and remember that's a computed value! It will be passed down as pixels, probably.

There is one exception to the computed-value-inheritance rule: raw number values. You can give an element styles like this:

p {line-height: 1.5;}

In that case alone, the number 1.5 will be passed down to the descendants, and used as a multiplier for the font-size value for each descendant. Thus:

p {font-size: 14px; line-height: 1.5;}

span {font-size: 10px;}

The computed value of line-height for the paragraph will be 21px, and for the span it will be 15px.

Content area An area generated by every element in a line. It is determined by the font size of its elements.
Content-area
in non-replaced element
A box described by the font-size of each character in the element, strung together. Margins, borders, or padding do not influence line height.
Content-area
in replaced element
The intrinsic height of the element plus any margins, borders, or padding.
em-box The box around a font character of a given 'size' as designed by the designer. It is sometimes referred to as an em-square. The theoretical square that glyphs are designed upon. Its height is the intended distance between lines of type in the same type size. It is the design grid on which the glyph outlines are defined.
font-size The value used with the em-box to scale a font for display. CSS defines the font size to be "the size of the font when set solid." This means that the height of the font is the distance from the highest point in the highest glyph to the lowest point in the lowest glyph.
Glyph An image for a character in a particular font and style.
half-leading The leading split in half and applied equally to the top and bottom edges of the element's content-area. The difference between font-size and line-height, applied equally above and below the content-area for each element.
Inline box The addition of (half-)leading to the content-area for each element.
Inline box height
for replaced elements

The height of the inline box of an element will be exactly equal to the intrinsic height of the element plus any margins, borders, or padding.

The box properties (margin, padding, and border properties) on inline replaced elements are handled just like box properties on block-level elements. The content height and width are determined by the height and width properties (which may be auto), and the padding, border, and margin are placed outside of the content. For inline replaced elements, the only edge relevant to the inline box model is the margin edge (the outside edge of the margin).

Inline box height
non-replaced element

The height of the inline box of a non-replaced element will be exactly equal to the value for line-height.

The difference between the font-size and line-height divided in half and applied to the top and bottom of each element's content height.

or

Font-size - line-height = leading

Divide leading by 2 = half-leading

Add the value of the half-leading to the top and bottom of the content area to get the inline box.

For the purposes of the box properties, the line height is subtracted from the line height to determine the height of an inline box. The vertical padding and border are placed outside the font edge. If the inline element is broken over lines, they occur on every line. However, they have no effect on the layout of the inline elements. (Since the vertical box properties have no effect on the layout of the elements, the vertical margin properties have no effect at all.)
Leading The difference between the values of line-height and font-size. It is the extra space between the lines of text above and below the font's size.
line-box

A line-box is the box which bounds the highest and lowest points of the inline boxes which are part of the line. It is the distance from the top of the highest inline box in the line to the bottom of the lowest inline box in the line. A line-box is as tall as the inline boxes within a line. That is, the top of the tallest inline box and the bottom of the lowest inline box define the top and bottom of the line box. That determines the separation between baselines.

It is always tall enough for all of the boxes it contains. However, it may be taller than the tallest box it contains (if, for example, boxes are aligned so that baselines line up). When the height of a box B is less than the height of the line box containing it, the vertical alignment of B within the line box is determined by the 'vertical-align' property.

Line-box height equals the value of line height.

line-height

The difference between the values of line-height and font-size for a given element. The line-height property specifies the logical height of an inline element. This is the height used in the vertical alignment of inline elements and the construction of line boxes. It defines the height of the inline box for a given element. It determines the amount by which the height of each element's linebox is increased or decreased.

This property DETERMINES the amount by which the height of each element's line box is increased or decreased. Basically it is not a set measurement, but as a calculation.

line-height defines the minimum distance between baselines. So take this as an example:

p {line-height: 18px;}

In any paragraph that contains only text, with no descendant elements of any kind, then the baselines of its lines should all be 18 pixels apart. This is the easiest case of calculating the height of each line box.

However, as soon as you start throwing in elements like images, or elements with different line-height values, or elements that have been vertically offset using vertical-align, then the picture gets crowded. Any of those things can make a line box taller than its default, and so push that baseline further away from the adjacent baselines. But nothing can make any line box smaller than 18 pixels tall-- at least the way CSS2 is written. Even if a line is nothing but a one-pixel-tall image, the line box will still be 18 pixels tall.

If the 'line-height' value is greater than the value of the 'font-size' for the element, this difference (called the "leading") is cut in half (called the "half-leading") and distributed evenly on the top and bottom of the inline box. In this manner, the content of an inline element box is centered within the line-box (assuming no 'vertical-align' property is also set to change this behavior.) Negative values for this property are not allowed. This property is also a component of the 'font' shorthand property.

Descendants that don't have their own value of line-height, will inherited a computed value. If they do have their own value, then it goes into effect and the inherited value is thrown out.

As described in CSS2 the line-height property takes four types of values (other than inherit):

  1. 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>.
  2. <length>
    The box height is set to this length. Negative values are illegal.
  3. <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.
  4. <Percentage>
    The computed value of the property is this percentage multiplied by the element's computed font size. Negative values are illegal.

<Length> and <percentage> values have computed values that are lengths, and therefore the computed values inherit as lengths. Therefore, they are dangerous on any element whose descendants have a different font size. <Number> and normal values have computed values that are scaling factors, and therefore inherit as scaling factors that are multiplied by the font-size when used in calculations. They are therefore safe.

  • If the computed value for the 'line-height' property is less than the computed 'font-size' for an inline element box, fonts may 'bleed' (overflow) the element box.
  • If this property is set for a block-level element box that contains inline elements, the value specifies the minimal height of each of the inline boxes.
  • For inline element boxed, this property specifies the height of the boxes generated by the element.
  • For inline replaced elements the height of the element box is given by the 'height' property instead of the 'line-height' property.
  • If an element box contains text in more than one font-size, the 'line-height' property should be determined using the largest font-size. This helps to create consistent baselines between adjacent line boxes.
Margin

A property that allows the author to specify how much space will be inserted between other exterior elements and the current element border.

Margins on non-replaced inline elements don't have any effect on line height. This is described in CSS2:10.8.1, which states:

Although margins, borders, and padding of non-replaced elements DO NOT enter into inline box height calculation (and thus the line box calculation), they are still rendered around inline boxes. Margins are by their nature invisible except in how they affect the placement of other elements. Since they don't have an effect on line height, they're effectively invisible for non-replaced elements. The left and right margins of an inline element should have a visible effect, by creating space to the left of the first box in an inline element, and the right of the last box.

The margin property does influence the line height of a replaced element.

Non-replaced element In general, those elements whose content is contained in the document.
Padding

A property that allows the author to specify how much space will be inserted between the element border and the element content. Negative values are not allowed.

Padding doesn't affect line height when set on non-replaced elements (per CSS2:10.8.1) but if there's a background set on the element, the padding can have a visible presence... or not. Browsers are permitted to do what they like here-- not apply any top or bottom padding, let the background grow but overlap other lines of text, let the background grow and slide it beneath other text lines, or anything else. Ditto for borders. Padding and borders will affect line layout on the sides of the inline element, in much the same way that margins do.

The padding property does influence the line height of a replaced element.

Replaced element Elements those whose content is outside of the document. Examples of replaced elements are things like images and form elements.
vertical- align

A property that affects the vertical positioning inside a line box of the boxes generated by an inline-level element. It applies only to inline elements, although that includes replaced elements such as images and form inputs. It is not inherited. Element content is typically vertically centered on a rendered line (with extra line-height amounts distributed equally on the top and bottom.) This property allows inline content boxes to be vertically aligned with respect to several different criteria on a rendered line.

Values include:

  • baseline - aligns 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. It is the initial value of vertical-align. Baseline means that text of any size will have its baseline aligned with the overall basline for the line. Images will have their bottom edge rest on the baseline, since that's what the value baseline is defined to mean for images (or any other replaced element).
  • middle - aligns the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.
  • sub - lowers 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 - raises 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 - aligns the bottom of the box with the bottom of the parent element's font.
  • <Percentage> - raises (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> - raises (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 - aligns the top of the box with the top of the line box.
  • Bottom - aligns the bottom of the box with the bottom of the line box.

In CSS1 vertical-align only took percentage and some named values but CSS2:10.8.1 expands the range of premitted values a bit. See the definition of line-height for details.