Html Email Spaces Between Tables (gmail And Outlook)

I am creating an HTML Email and am struggling getting images to render in Outlook and Gmail. I have the usual problem of extra space being added between table rows in Gmail however

Solution 1:

Use this for your images:

style="margin: 0; border: 0; padding: 0; display: block;"

That will prevent any spacing around them. If the spacing persists, it is because of the table itself, and in particular the extra (bad word here) Microsoft inserts.

Are you sending/forwarding from Outlook to Gmail? The gaps are unavoidable if that is the case. See similar question here. Note that tables next to tables (in the code, but stacked on page) make bigger gaps than table rows, and by setting the color on a wrapping parent element, you can hide the 'line' created when they separate.

You have a bunch of extra stuff in your code you don't really need. Just put table td {border-collapse: collapse;} in your style tag then all you need is this:

<tablewidth="100%"border="0"cellpadding="0"cellspacing="0"><tr><td><imgalt=""src=""width=""height=""style="margin: 0; border: 0; padding: 0; display: block;"></td></tr></table>

Just note that table cells need to be a min of about 19px as that is the min-height it can be in Outlook. I prefer to design around that, but some people mess with line-height tricks also.

Solution 2:

Have you looked into using http://htmlemailboilerplate.com/ - it helps eliminate many of the problems that you are faced with when building HTML emails.

It will help normalise the email across many clients and just leaves you to do the actual building.