Removing the 3 pixel gap in Hotmail email

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:

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

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

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

    thanks a lot. helped a lot.

  2. <a href='http://www.urbanseven.com' rel='external nofollow' class='url'>Brenden</a> 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

  3. Thomas 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.

  4. Richard Miller On November 6th, 2008 at 6:26 pm , Richard Miller wrote:

    Thank you very much for the tip. Very successful.

  5. Jason 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).

  6. Joe 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.

Leave a Reply

(will not be published)