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.

Determining half leading

Half leading in CSS is determined by (a) finding the difference between the line-height and the font-size. Then second (b) dividing the leading value in half to obtain the half-leading. It's application helps to determine the value of each inline box, which in turn will ultimately help to determine the line box. The process is as follows:

A. Find the difference between the line-height and the font-size.

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 computed value of 'line-height' is called the leading. (The leading is negative when the font-size is larger than the line-height.) This leading is distributed equally on both top and bottom edges of the element's content-area.

B. Divide the leading value in half.

Half the leading is called the half-leading :-) This value will be applied half above, and half below. 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.

When the 'line-height' value is less than the font size, 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 inline box height calculation (and thus the line box calculation), they are still rendered around inline boxes. This means that if the height of a line box is shorter than the outer edges of the boxes it contains, 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).