Mystery padding in table cells with image
I hate to admit this: I'm building a complicated, but gmail-friendly HTML email blast (inline styling). Anyway, it's a game of tables and split images, and I've seemed to have forgotten all my 1995 table mojo.
http://www.highgatecross.com/development/tables/
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="skyline.jpg" alt=""></td>
<td><img src="skyline-02.jpg" alt=""></td>
<td><img src="skyline-03.jpg" alt=""></td>
</tr>
<tr>
<td colspan="3"><img src="skyline-04.jpg" alt=""></td>
</tr>
</table>
I have a mystery 4-pixel "padding" below each images (the DOM panel in Firebug shows a cell "clientHeight" 4 pixels greater than my images).
I have tried every combi开发者_高级运维nation of deprecated HTML styling (heights, etc.) and CSS and no joy.
So, simply, how do I rid the 4 pixels and close the gap between rows?
Just use style="display: block"
on the image.
Problem solved.
I should have checked StackOverflow first!
Either:
<img src="some.jpg" style="display: block" />
or
<img src="some.jpg" style="vertical-align: bottom" />
will eliminate the 4 pixels under the image in a table cell.
I fiddled around with a number of properties and it appears that setting line-height: 0
removes the gap.
Another way to fix is to add font-size: 0
on the td
.
精彩评论