Recipe 8.6. Removing Gaps from Images Placed in Table Cells

Problem

You want to get rid of space in a table cell that contains only an image. You want to go from Figure 8-4 to Figure 8-5.

Figure 8-4. A gap appearing below an image in a table cell

Figure 8-5. Displaying an image in a table cell as a block-level element

Solution

Set the image to be displayed as a block-level element:

td img {  display: block; }

Discussion

The browser puts the image on the baseline used for text content since it's being placed as an inline element. Therefore set the element as a block-level element to force the browser to render the image differently. This baseline isn't at the bottom of the cell because some letters (for example, g, p, q, and y) have descenders that hang below that baseline (see Figure 8-6).

Figure 8-6. The descenders of the lowercase letters g, p, q, and y highlight the whitespace below the image

Because the baseline is a percentage of the total font size, you can't simply remove the descender space. By instructing the browser to handle the image differently, the automatic creation of the descender whitespace can be avoided altogether. Thus set the display property for the image to block as shown in the Solution.

Using Document Type Definitions

Another method involves manipulating DTDs. A Document Type Definition (DTD) is a formal statement that lists the elements used in a document. For example, there are differences in the HTML2 DTD compared to the HTML 4.1 DTD. Those differences are spelled out in their own DTD. A browser can determine which DTD to use when rendering a page by a small statement that precedes any markup in a web page.

There are certain DOCTYPEs that will put the browser into standards mode instead of quirks mode, an umbrella term used to describe the irregular behavior of browsers. Having the browser in standards mode ensures the gap between images and table cell borders. Use alternative DOCTYPES that trigger quirks mode but that still validate to avoid this gap, or if you simply want to avoid standards mode. For more information, see a chart comparing DOCTYPEs and browsers at http://www.webstandards.org/learn/reference/doctype_switch.html.

There may be times when setting the image's display to block isn't the best solution to removing whitespace around an image in a table cell. If that turns out to be the case, another method to remove the space is to set the image's vertical-align property to bottom as long as the image is taller than the line box.