Question

Images lost the top row of pixels, but only in certain situations. Example markup:

<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td valign="top" height="20">
            <div style="line-height:0;"><img src="http://path.to/image.png" alt="" height="20" width="25" /></div>
        </td>
    </tr>
</table>

I was under the impression that since <img> is an inline element, it should be contained inside a block level element. That’s why I wrapped my <img> in <div>. But this caused a problem where the text under-hang caused my <div> to be too tall. So I set line-height to 0 as a workaround.

No matter what height or valign I set on the <td> or the <img>, the top of the image is still cut off. I found that removing the line-height was the answer. Why is this?

I will use display: block on my <img> tags in the future.

Answer 1

<div>s get treated differently depending on the email client you’re using. The IE of email clients is AOL (but, who uses that anymore). I think chipcullen is right that you’re over thinking it a bit. Why put in more code than necessary. Give this a try (no line reaks within the TD):

<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td><img src="http://path.to/image.png" alt="" height="20" width="25"></td>
    </tr>
</table>

Or if you really must define heights:

<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td height="20" style="height:20px;line-height:20px;"><img src="http://path.to/image.png" alt="" height="20" width="25"></td>
    </tr>
</table>

Hope that helps!