When placing images inside a table structure. you may notice white space between your images if the proper measures aren't taken, particularly when rendered in Gmail. This poses a problem when you slice images into multiple sections that normally appear seamless when viewed. Luckily, there are a few easy steps that can be taken to allow for seamless viewing.

Below is the HTML code behind a series of four images. There are four cells and two rows in this table structure: 

This is how the above code will render: 

As you can see, there is an undesirable amount of white space between the four images. 

To correct this issue:

  1. Add the following code to the parent table of your cells: border="0" cellpadding="0" cellspacing="0"

This is how the above code now renders:

The cells in each row appear seamless, but the two rows are still visibly separated.

  1. On each image tag add style="display:block;" to force the image to span the entire space of the parent element.

  2. Add style="font-size:0px;" on the parent table.

NOTE: The font-size:0px and display:block style elements are the known fix for Gmail white space issues. If you are having trouble with Gmail, be sure to check the code for these snippets.

This is how the above code now renders: 

Did this answer your question?