Removing White Spacing Between Images in a Table

Question

I know this has been covered before but the solutions didn\'t help me - i\'m not a programmer but i can handle basic HTML code. I am trying to send a HTML email out that has

Answer 1

From quick check I just did, looks like the problem is due to blank space inside the cells markup taking up some place and making the cells bigger.

One way around this is setting the font size of the cells to 0 thus eliminating that extra space.

Live test case with the fix applied.

In your case, try adding this to the HTML you send:

<style type="text/css">
    table td { font-size: 0px; }
</style>

This is assuming you have only one table and all cells have only images, if you have more tables then give that specific table id e.g. <table id="MyImagesTable"> then change to:

#MyImagesTable td { font-size: 0px; }

If the email client of those getting the email does not support style sheets you will have to manually set it for each cell:

<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td style="font-size: 0px;">...</td>
        <td style="font-size: 0px;">...</td>
        <td style="font-size: 0px;">...</td>
    </tr>
    <!-- ...more rows... -->
</table>

Answer 2

This problem is common on many mail clients, just use:

<img style="display:block" />

on every image in your HTML.

Answer 3

a lot of times it could be user error. when you slice in photoshop, make sure ALL SLICES ARE TOUCHING. if there is a 1px gap, then that will screw everything up!!!

also, here's a trick i learned....

Set all images to have a border="0" tag after the alt=""...

if there are any ** ** tags, and i mean only , not

so for example....

try that, and make sure all images have border="0" and all tags have a set width, all slices are touching, and you should have 0 gaps.

Answer 4

I also face same problem.

But i tried

<img src ="images/xyz.jpg"  style="display:block">

and solved

Answer 5

Without actually having seen your code, I would guess that you're seeing spaces between your images because you have actual space between your images.

If you have something like this...

<img src="image1.jpg">
<img src="image2.jpg">

Change it to... (note there is no space between the two image tags)

<img src="image1.jpg"><img src="image2.jpg">

If you are placing the images within individual cells (i.e. one image per cell) then try putting the CSS of border-collapse:collapse...

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse">

UPDATE

As @Shadow has pointed out, neither parts of the above will make any difference.

It appears that FireFox and Chrome deal with the image as it would text (for some reason), therefore his suggestion of table td { font-size:0px; } is IMHO the correct answer. (IE doesn't seem to be effected by the issue.)

Answer 6

On images, try using

style="display:block" 

It should work.