1

It looks fine in gmail, hotmail vb but I couldn't solve the space problem in outlook. it only shows 1px whitespace between the images and only vertically. Any help will be appreciated, thanks.

Here is my code.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
</head>
<body>
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr align="center">
            <td>
                <table border="0" cellspacing="0" cellpadding="0" style="width: 700px; border-spacing: 0px; font-family: Arial; margin: 0 auto; display: block; border-collapse: collapse">
                    <tr>
                        <td>
                            <img src="1.jpg" alt="mail" />
                        </td>
                        <td>
                            <img src="2.jpg" alt="mail" />
                        </td>
                        <td>
                            <img src="3.jpg" alt="mail" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <img src="4.jpg" alt="mail" />
                        </td>
                        <td>
                            <a href="#">
                                <img src="5.jpg" alt="mail" /></a>
                        </td>
                        <td>
                            <img src="6.jpg" alt="mail" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <img src="7.jpg" alt="mail" />
                        </td>
                        <td>
                            <img src="8.jpg" alt="mail" />
                        </td>
                        <td>
                            <img src="9.jpg" alt="mail" />
                        </td>
                    </tr>
                </table>

            </td>
        </tr>
    </table>
</body>
</html>

2 Answers 2

5

I would first trying adding display: block; to the images as an inline style and for the tables add border-collapse: collapse; also as an inline style.

If that doesn't resolve the spaces there are some techniques that apply specifically to Outlook that you should try next. There's a very in-depth article on fixing extra space issues with Outlook tables on Email on Acid.

You may also want to try using even more nested tables inside the td tags.

2
  • Set your image tags like this <img style="margin: 0; border: 0; padding: 0; display: block;" src="" width="" height="" alt="">. The display block is the most important thing for Outlook. Also, the border-collapse doesn't need to be inline, it can be in the header style tag if you prefer.
    – John
    Sep 27, 2013 at 14:24
  • This doesn't work for me. Has anyone got a working example? Sep 1, 2015 at 12:28
2

I've come across this problem a number of times. Simple fix though. Apply a font-size and line-height on the tds holding the image. It will remove the space. Use a font-size and line-height that is smaller than your image heights.

Also the display:block is very important. Definitely need that.

6
  • @Mr.Alien The font-size and line-height only come into play if the table cell height is less than 19px. So this is only the correct answer IF the images have a height less than 19px, otherwise juissa's answer about display:block; is technically the correct one...
    – John
    Oct 4, 2013 at 18:11
  • @John My mailer had only images in the table cell, adding display: block; didn't helped me to get rid of the spaces, but this did
    – Mr. Alien
    Oct 4, 2013 at 18:13
  • @Mr.Alien Were your images less than 19px high? I've never needed to use the line-height or font-size workaround, (and I test a lot in Outlook) so it is interesting that it would fix this issue...
    – John
    Oct 4, 2013 at 18:38
  • @John no, it varied, from 20px to 150px, also, outlook was good, it was gmail which was causing whitespace, also, not the html interface in gmail, but the one with the themes, normal gmail
    – Mr. Alien
    Oct 4, 2013 at 19:13
  • is there a fix for large images? I have a 1px vertical line on one of my images, i've been trying to fix it for hours! :(
    – Adam G
    Jun 2, 2014 at 14:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.