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

Figure 7-44. Replaced elements can increase the height of the line box but not the value of
line-height

After everything else, applying margins,
borders, and padding to inline replaced elements almost seems
simple.

Padding and borders are applied to replaced elements as usual;
padding inserts space around the actual content and the border surrounds the
padding. What's unusual about the process is that these two things actually
influence the height of the line box because they are part of the inline box of an
inline replaced element (unlike inline nonreplaced elements). Consider
Figure 7-45
, which results from the
following
styles:

img {height: 20px; width: 20px;}
img.one {margin: 0; padding: 0; border: 1px dotted;}
img.two {margin: 5px; padding: 3px; border: 1px solid;}

Figure 7-45. Adding padding, borders, and margins to an inline replaced element
increases its inline box

Note that the first line box is made tall enough to contain the image,
whereas the second is tall enough to contain the image, its padding, and its
border.

Margins are also contained within the line box, but they have
their own wrinkles. Setting a positive margin is no mystery; it will simply make
the inline box of the replaced element taller. Setting negative margins,
meanwhile, has a similar effect: it decreases the size of the replaced element's
inline box. This is illustrated in
Figure
7-46
, where you can see that a negative top margin is pulling down the
line above the
image:

img.two {margin-top: -10px;}

Figure 7-46. The effect of negative margins on inline replaced elements

Negative margins operate the same way on block-level elements, of
course. In this case, the negative margins make the replaced element's inline box
smaller than ordinary. Negative margins are the only way to cause inline replaced
elements to bleed into other lines.

You may have noticed by now that, by default, inline
replaced elements sit on the baseline. If you add bottom padding, a margin, or a
border to the replaced element, the content area will move upward. Replaced
elements do not actually have baselines of their own, so the next best thing is to
align the bottom of their inline boxes with the baseline. Thus, it is actually the
bottom outer margin edge that is aligned with the baseline, as illustrated in
Figure 7-47
.

Figure 7-47. Inline replaced elements sit on the baseline

This baseline alignment leads to an unexpected (and unwelcome)
consequence: an image placed in a table cell all by itself should make the table
cell tall enough to contain the line box containing the image. The resizing occurs
even if there is no actual text, not even whitespace, in the table cell with the
image. Therefore, the common sliced-image and spacer-GIF designs of years past can
fall apart quite dramatically in modern browsers. Consider the simplest
case:

td {font-size: 12px;}

Under
the CSS inline formatting model, the table cell will be 12 pixels tall, with the
image sitting on the baseline of the cell. So there might be three pixels of space
below the image, and eight above it, although the exact distances would depend on
the font family used and the placement of its baseline. This behavior is not
confined to images inside table cells; it will also happen in any situation where
an inline replaced element is the sole descendant of a block-level or table-cell
element. For example, an image inside a
div
will also sit on the baseline.

The most common workaround for such circumstances is simply to make
spacer images block-level so that they do not generate a line box. For
example:

td {font-size: 12px;}
img.block {display: block;}

Another
possible fix is to make the
font-size
and
line-height
of the enclosing table cell
1px
, which makes the line box only as tall
as the one-pixel image within it.

Here's another interesting effect of
inline replaced elements sitting on the baseline: if you apply a negative bottom
margin, the element will actually get pulled downward because the bottom of its
inline box will be higher than the bottom of its content area. Thus, the following
rule would have the result shown in
Figure
7-48
:

p img {margin-bottom: -10px;}

Figure 7-48. Pulling inline replaced elements down with a negative bottom margin

This can easily cause a replaced element to bleed into following lines
of text, as
Figure 7-48
illustrates.