How do I remove the space under an image in a table cell?
Author: Deron Eriksson
Description: This CSS tutorial describes how remove the space under an image in a cell in a table by changing the image display property to block.
Tutorial created using: Windows XP


In IE7, if you have a table cell with an image displayed in it, you may have noticed a small space underneath the image in the table cell. This space occurs in IE7 but not Firefox. This space can be removed by setting the style of the image to be 'block' rather than 'inline'.

This is demonstrated in style-test.html.

style-test.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Style Test</title>
</head>
<body>

<table border="1">
<tr><td>
Space on bottom of cell in IE7:<br/>
<img src="avajavalogo.jpg"/>
</td></tr>
<tr><td>
No space on bottom of cell in IE7:<br/>
<img src="avajavalogo.jpg" style="display: block;"/>
</td></tr>
</table>

</div>
</body>
</html>

The display of style-test.html in IE7 and Firefox is shown below. Notice that in IE7, the space is present in the top cell but not the bottom cell. In Firefox, the space is not present in either cell.

comparison of images in table cells in IE7 and Firefox