CSS: The Definitive Guide, 3rd Edition (28 page)

First, for an inline nonreplaced element or piece of anonymous text, the value
of
font-size
determines the height of
the content
area. If an inline element has a
font-size
of
15px
, then the content area's height is 15
pixels because all of the em boxes in the element are 15 pixels tall, as
illustrated in
Figure 7-30
.

Figure 7-30. em boxes determine content area height

The next thing to consider is the value of
line-height
for the element, and the difference between it and the
value of
font-size
. If an inline nonreplaced
element has a
font-size
of
15px
and a
line-height
of
21px
, the difference
is 6 pixels. The user agent splits the six pixels in half and applies half to the
top and half to the bottom of the content area, which yields the inline box. This
process is illustrated in
Figure 7-31
.

Figure 7-31. Content area plus leading equals inline box

Let's assume that the following is true:

This is text, some of which is emphasized, plus other text

which is strongly emphasized
and which is

larger than the surrounding text.

In this example, most of the text has a
font-size
of
12px
, while the text in
one inline nonreplaced element has a size of
24px
. However,
all
of the text has a
line-height
of
12px
since
line-height
is an
inherited property. Therefore, the
strong
element's
line-height
is also
12px
.

Thus, for each piece of text where both the
font-size
and
line-height
are
12px
, the content height does not change
(since the difference between
12px
and
12px
is zero), so the inline box is 12 pixels high.
For the
strong
text, however, the difference
between
line-height
and
font-size
is
-12px
. This is divided in half to determine the half-leading (
-6px
), and the half-leading is added to both the top
and bottom of the content height to arrive at an inline box. Since you're adding a
negative number in both cases, the inline box ends up being 12 pixels tall. The
12-pixel inline box is centered vertically within the 24-pixel content height of
the element, so the inline box is actually smaller than the content area.

So far, it sounds like you've done the same thing to each bit of text, and all
of the inline boxes are the same size, but that's not quite true. The inline boxes
in the second line, although they're the same size, don't actually line up because
the text is all baseline-aligned (see
Figure
7-32
).

Figure 7-32. Inline boxes within a line

Since inline boxes determine the height of the overall line box, their
placement with respect to one another is critical. The line box is defined as the
distance from the top of the highest inline box in the line to the bottom of the
lowest inline box, and the top of each line box butts up against the bottom of the
line box for the preceding line. The result displayed in
Figure 7-32
gives you the paragraph shown
in
Figure 7-33
.

Figure 7-33. Line boxes within a paragraph

If you change the vertical alignment of the
inline boxes, the same height determination principles apply. Suppose that you
give the
strong
element a vertical alignment of
4px
:

This is text, some of which is emphasized, plus other text

that is strongly
emphasized and that is

larger than the surrounding text.

That
small change raises the element four pixels, which pushes up both its content area
and its inline box. Because the
strong
element's inline box top was already the highest in the line, this change in
vertical alignment also pushes the top of the line box upward by four pixels, as
shown in
Figure 7-34
.

Figure 7-34. Vertical alignment affects line-box height

Let's consider another situation. Here, you have another inline
element in the same line as the
strong
text,
and its alignment is other than the
baseline:

this is text, some of which is emphasized, plus other text

that is strong
and tall and that is

larger than the surrounding text.

Now
you have the same result as in your earlier example, where the middle line box is
taller than the other line boxes. However, notice how the "tall" text is aligned
in
Figure 7-35
.

Figure 7-35. Aligning an inline element to the line box

In this case, the top of the "tall" text's inline box is aligned with
the top of the line box. Since the "tall" text has equal values for
font-size
and
line-height
, the content height and inline box are the same. However,
consider
this:

This is text, some of which is emphasized, plus other text

that is strong
and tall
and that is

larger than the surrounding text.

Since
the
line-height
for the "tall" text is less
than its
font-size
, the inline box for that
element is smaller than its content area. This fact changes the placement of the
text itself, since the top of its inline box must be aligned with the top of the
line box for its line. Thus, you get the result shown in
Figure 7-36
.

Figure 7-36. Text protruding from the line box (again)

On the other hand, you could set the "tall" text to have a
line-height
that is actually bigger than its
font-size
. For
example:

This is text, some of which is emphasized, plus other text

that is strong
and tall
and that is

larger than the surrounding text.

Since
you've given the "tall" text a
line-height
of
18px
, the difference between
line-height
and
font-size
is 6 pixels. The half-leading of 3 pixels is added to the
content area and results in an inline box that is 18 pixels tall. The top of this
inline box aligns with the top of the line box. Similarly, the value
bottom
will align the bottom of an inline element's
inline box with the bottom of the line box.

In the terms we've been
using in this chapter, the effects of the assorted keyword values of
vertical-align
are:

These values are explained in more detail in
Chapter 6
.