Getting rid of the space under an image in a table cell layout

If you’re trying to put an image in a table cell, and you want the image to fill the entire cell area vertically, you’ll notice that the browser adds some space between the image and the bottom of the table cell.

There are two ways to solve the problem:

1. Using the img tag, specifying in the tag – style=”display:block;”. The space disappears.

2. Using the image as the background of the table cell.
This solves the space problem but might cause a new problem – when the horizontal size of the cell is larger than the image the image is tiled. You can cancel the tiling (by using style=”background-repeat:no-repeat”) but you can’t tell it to stretch.

Leave a Reply

Your email address will not be published. Required fields are marked *