CSS Pocket Reference, 3rd Edition

Inline Layout

All inline elements have a line-height, which has a great deal to do with how the elements are displayed. The height of a line of text is determined by taking into account the following factors:

Anonymous text

Any string of characters not contained within an inline element. Thus, in the markup:

<p> I'm <em>so</em> happy!</p>

the sequences “I’m” and “happy!” are anonymous text. Note that the spaces are part of that text, as a space is a character like any other.

Em-box

The em-box defined in the given font; otherwise known as the character box. Actual glyphs can be taller or shorter than their em-boxes, as discussed in Chapter 5 of CSS: The Definitive Guide, Third Edition (O’Reilly). In CSS, the value of font-size determines the height of each em-box.

Content area

In nonreplaced elements, the content area can be the box described by the em-boxes of every character in the element, strung together, or else the box described by the character glyphs in the element. The CSS2.1 specification allows user agents to choose either. This text uses the em-box definition for simplicity’s sake. In replaced elements, the content area is the intrinsic height of the element plus any margins, borders, or padding.

Leading

The leading is the difference between the values of font-size and line-height. Half this difference is applied to the top and half to the bottom of the content area. These additions to the content area are called, not surprisingly, half-leading. Leading is applied only ...