HTML and CSS Reference
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
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
the anonymous text, as a space is a character like any other.
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
height of each em-box.
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.
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 addi-
tions to the content area are called, not surprisingly, half-leading. Leading is applied only
to nonreplaced elements.
The box described by the addition of the leading to the content area. For nonreplaced ele-
ments, the height of the inline box of an element will be equal to the value for line-
height . For replaced elements, the height of the inline box of an element will be equal to
the content area, as leading is not applied to replaced elements.
The shortest box that bounds the highest and lowest points of the inline boxes that are
found in the line. In other words, the top edge of the line box will be placed along the top