IMAGES, TEXT AND DESCENDER SPACE

Where images and text are wanted inline together.

playing

Fig 1. <p><img src="red.gif" ... >playing</p>

"playing" has 3 descending bits. The img is an inline element by default. You can think of the image as a character without a descender. Like "a" or "m". And just like those characters, they must sit on lines and as if in unseen "typographical" boxes that have room for characters with descenders, like "p" and "q". If you want to be rid of this inline descender space in a practical manner but still keep the image inline you can safely use the CSS style of 'vertical-align: bottom' on the img:

playing

Fig 2. <p><img style="vertical-align:bottom;" src="red.gif" ...>playing</p>

Or you can use what seems the more accurate, vertical-align: text-bottom. But some browsers stuff it up. Try it in Opera 9 or 10:

playing

Fig 3. <p><img style="vertical-align:text-bottom;" src="red.gif" ...>playing</p>

Where you just want to be rid of (descender) space

If you don't want descender space, where no text is needed on the same line, for example, in contexts where the image is within another element like a table cell:

Fig 4. <td><img src="red.gif" ...></td>

Simply change the img element's default inline style to block, using display: block:

Fig 5. <td><img style="display: block" src="red.gif" ...></td>

This latter styling is useful for where you want to have a short caption underneath without having to provide an extra containing block or break element to force the text under:

A red rectangle

Fig 6. <td><img style="display: block" src="red.gif" ...>A red rectangle</td>