Search code examples
emailbackgroundpaddingnewsletter

Email clients adding some extra pixels below TD with background image

I am facing a problem making a newsletter in Gmail and Outlook.

I've got a table with some TD's that contain a background-image:

<tr>
    <td width="401" height="99" background="http://www.domain.com/bg_left.jpg"></td>
    <td width="149" height="99" background="http://www.domain.com/bg_right.jpg"></td>
</tr>

I also tried adding the background images trough this method. But with both ways I've got the following behaviour in Gmail and Outlook.

enter image description here

In both examples there is added some extra padding where the image is repeated. Someone familiar with this problem? I couldn't find anything about this by myself.

Thanks instead.

Solution

  • For Gmail, you can remove the margin at the bottom of your images by changing the display property to block will prevent that.

    Unfortunately, it seems that Outlook.com doesn't allow you to set the display property of images, but if you add a div (which is a block by default) with the same height as the img, as described here, you'll get the same result.