In this post you will learn how to remove unwanted whitespace or gaps that may appear in between rows when creating an HTML Email. This usually occurs when the rows have a background color that is different from the parent table element. A program such as Litmus can be used to reveal the bug before releasing an email to your intended recipients. The following list of devices are the ones usually affected.

• iPhone 6 iOS 8
• iPhone 6+ iOS 8
• iPhone 6 iOS 9
• iPhone 6+ iOS 9
• iPhone 7 iOS 10.2
• iPhone 7+ iOS 10.2
• Android 5.1
• Android 6.0

Our initial HTML consists of a parent <table> element, which is used for viewing our emails in a browser. An inner <table> element is used to contain and center the email in a desktop browser. The remainder of the code consists of three table rows with a yellow background color. The first and third rows are spacers that are each 25 pixels in height, while the middle row contains the line of text.

HTML

<!-- outer wrapper for displaying email in browser -->
<table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#ffffff">
    <tr>
        <td align="center" valign="top">

            <!-- inner wrapper that contains email -->
            <table align="center" width="600" cellpadding="0" cellspacing="0" border="0" bgcolor="#ffffff">
                <tr>
                    <td colspan="3" bgcolor="#f5b21e" align="left" height="25" style="font-size: 1px;"> </td>
                </tr>
                <tr>
                    <td colspan="3" bgcolor="#f5b21e" align="center" valign="middle" height="25" style="font-size: 24px;font-weight:bold;font-family: Arial, Helvetica, sans-serif;color:#00008B;">Hello world!</td>
                </tr>
                <tr>
                    <td colspan="3" bgcolor="#f5b21e" align="left" height="25" style="font-size: 1px;"> </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

This is an image showing the gaps between each of the rows.

As you can see, the white background of the containing table bleeds through the gaps, showing what appears to be two faint white lines. Surrounding these three <tr>‘s with a table that has a yellow background will do the trick. See the updated HTML below, with our changes bolded.

Solution

HTML

<!-- outer wrapper for displaying email in browser -->
<table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#ffffff">
    <tr>
        <td align="center" valign="top">

            <!-- inner wrapper that contains email -->
            <table align="center" width="600" cellpadding="0" cellspacing="0" border="0" bgcolor="#ffffff">
                <tr>
                    <td colspan="3" align="left">
                        <table cellspacing="0" cellpadding="0" border="0" width="100%" bgcolor="#f5b21e">
                            <tr>
                                <td bgcolor="#f5b21e" align="left" height="25" style="font-size: 1px;"> </td>
                            </tr>
                            <tr>
                                <td bgcolor="#f5b21e" align="center" valign="middle" height="25" style="font-size: 24px;font-weight:bold;font-family: Arial, Helvetica, sans-serif;color:#6a2875;">Hello world!</td>
                            </tr>
                            <tr>
                                <td bgcolor="#f5b21e" align="left" height="25" style="font-size: 1px;"> </td>
                            </tr>
                        </table>
                    </td>
                </tr> 
            </table>
        </td>
    </tr>
</table>