Removing the 3 pixel gap in Hotmail email

16 January 2008

An example of the 3 pixel gap

Hotmail has a bug where a gap of 3 pixels appears in between images, even when the IMG tags have no spaces separating them. To fix this annoyance I've found that adding style="display: block;" to the IMG tag fixes this. I apply the fix as an inline style to avoid the CSS filtering of web based email services.

You should end up with the following for images that need the 3 pixel gap removing:

PLAIN TEXT

HTML:

<img src="image.gif" width="100" height="100" alt="Image" style="display: block;" />

Tweet this

Categories: Web Design / Dev
Tags: gap, hotmail, html email, webmail
RSS 2.0 feed | leave a response | trackback

6 Responses to “Removing the 3 pixel gap in Hotmail email”

On February 6th, 2008 at 5:55 pm , Naureen wrote:

thanks a lot. helped a lot.
On August 11th, 2008 at 6:08 pm , Brenden wrote:

Fantastic tip!
I was using the solution:
style=”vertical-align: bottom;” but getting mixed results.

This seems to work every time.

…Interesting to note that even hotmail msn emails (from hotmail) are broken with this bug.

_B
On August 11th, 2008 at 8:35 pm , Thomas wrote:

Thanks for the fix! As a sidenote, I just noticed that this also seems to fix the HTML rendering issues in Outlook 2007 for Windows.
On November 6th, 2008 at 6:26 pm , Richard Miller wrote:

Thank you very much for the tip. Very successful.
On January 14th, 2009 at 2:10 am , Jason wrote:

Awesome worked well.. thanks!

Microsoft have a lot to answer for!! (i.e. hotmail and IE6).
On January 22nd, 2009 at 4:41 pm , Joe wrote:

You are awesome! Thank you so much! I was searching everywhere. It’s funny because when I came across your site, the title for this page couldn’t of said it better. Thanks again.

Removing the 3 pixel gap in Hotmail email

6 Responses to “Removing the 3 pixel gap in Hotmail email”

Leave a Reply