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:
The code will render like so:
As you can see, there is an undesirable amount of white space between the four images.
To remove the spacing, add the following code to the parent table of your cells: border="0" cellpadding="0" cellspacing="0"
The cells in each row appear seamless, but the two rows are still visibly separated.
On each image tag add style="display:block;" to force the image to span the entire space of the parent element.
Add style="font-size:0px;" on the parent table.
💡 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.
The images will now render without padding:
