IMAGES, TEXT AND DESCENDER SPACE

Where images and text are wanted inline together.

My Logoplaying

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:

My Logoplaying

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:

My Logoplaying

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:

My Logo

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

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

My Logo

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:

My LogoA red rectangle

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