Gmail displaying gaps between images

Question

Building an overly fancy HTML mail for a client. Code validates at http://validator.w3.org as XHTML 1.0 Transitional by direct input. Thing is Gmail displays gaps between

Answer 1

In my html I have a lot of table cells which contain multiple images of the same height side by side. The problem with this technique turned out to be that I could not make my images display block since that would drastically mess up my layout. Turned out the solution for removing the gmail gap was to simply add style of line-height: 50% to the table itself. I tested in all browsers with positive results. To be honest, I'm not 100% sure why this works or if it will work in every case but if your situation is like mine, you might want to give this solution a try.

PS, thanks to @Jon and @Jason for giving me the idea.

Answer 2

For any image in its own table cell, use display: block and line-height: 50%

<img alt="some text" style="display: block;line-height: 50%" src="image.jpg" />

Set the padding to 0 and margin to 0, although setting margin to -1px might fix small gaps on iPhone/iPad.

stick: <style type="text/css"> img{display: block;}</style>

...within the body tag, not the head, as it'll get stripped out by some clients.

Don't get hung up on if your code validates, getting email templates working cross-browsers and clients results in some fugly code!

P.S. Watch out for Outlook 2007 (it uses the Word rendering engine) and Hotmail on Firefox.

Answer 3

I fixed this issue by shudder using Dreamweaver and using image maps. I would only suggest this if there is no other way, but it fixed my problem.

Answer 4

If you have a table cell containing only an image and you're still seeing the extra space beneath your images, the solution is to add line-height:0; to the table cell. For example, <td style="line-height:0;">.

Answer 5

I know this is an older post, but this helped me, for anyone still looking: <p style="margin: 0;font-size: 0;line-height: 0;"><img src="..." .../></p>

Wrap your image(s) in a paragraph tag with margin, font-size, and line-height set to "0". I noticed that both Outlook and Gmail were adding erroneous paragraph, span, and font tags. Hope this helps someone else.

Answer 6

If you do not want to use inline css, add align="top" and border="0":

`<img src="" width="100" height="100" alt="" align="top" border="0" />`