Gmail inserts gaps above and below inline images

I know this topic has been discussed before, and a solution was given to add the following to all images.

img {display: block !important;}

However, after attempting this solution, my inline images are still showing gaps above and below:

http://farm8.staticflickr.com/7063/6797936362_7b692be6a1.jpg

Here is my code:

In my email head:

<head>
<style>
img { display: block !important; }
</style>
</head>

In my email body (the chunk related to the screenshot above):

<table width="590" border="0" cellspacing="0" cellpadding="0">
                    
                    <!-- BROWSER LINK -->
          <tr>
            <td align="center" style="padding: 30px 0 15px 0;">
              <p style="margin: 0; padding: 0 10px 0 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 12px; color: #FFF; line-height: 18px;">If this email looks funky... <webversion>view it in your browser</webversion></p>
            </td>
          </tr>
          <!-- end BROWSER LINK -->
                    
                    <!-- CONTAINER TOP -->
                    <tr>
                     <td><img src="container_top.png" width="590" height="5" /></td>
                    </tr>
                    <!-- end CONTAINER TOP -->
                    
                    <!-- HEADER -->
                    <tr>
                      <td style="background-color: #d5e3e7;">
                        <table border="0" cellspacing="0" cellpadding="0">
                          <tr>
                            <td><a href="http://www.foalio.com"><img src="logo.png" width="271" height="82" alt="Foalio" /></a></td>
                            <td><img editable="true" width="48" label='Issue Date' /></td>
                            <td><img src="header_right.png" width="200" height="82" /></td>
                            <td>
                              <table border="0" cellspacing="0" cellpadding="0">
                                <tr>
                                  <td><forwardtoafriend><img src="forward.png" style="float: right; margin-bottom: 5px;" /></forwardtoafriend></td>
                                </tr>
                                <tr>
                                  <td><tweet><img src="tweet.png" style="float: right; margin-bottom: 5px;" /></tweet></td>
                                </tr>
                                <tr>
                                  <td><fblike><img src="like.png" style="float: right; margin-bottom: 5px;" /></fblike></td>
                                </tr>
                              </table>
                            </td>
                          </tr>
                        </table>
                      </td>
                    </tr>
                    <!-- end HEADER -->
                    
                    <!-- RIDGE -->
                    <tr>
                     <td><img src="ridge_down.png" width="590" height="4" /></td>
                    </tr>
                    <!-- end RIDGE -->
                    
                    <!-- RIBBON BOTTOM -->
                    <tr>
                     <td style="background-color: #FFF;">
                       <table border="0" cellspacing="0" cellpadding="0">
               <tr>
                 <td width="271"><img src="spacer.png" /></td>
                 <td><img src="ribbon_bottom.jpg" width="48" height="19" /></td>
                 <td width="271"><img src="spacer.png" /></td>
               </tr>
             </table>
           </td>
                    </tr>
                    <!-- end RIBBON BOTTOM -->

Thanks for any help in advance!

roshodgekiss roshodgekiss, 4 years ago

Hey holidayatsea! I did the sneaky and took a look at your latest code and I assume you found that a img {border: 0;} did the trick? I can't repro the spaces in Outlook with your latest template :)

Nice work - it's a gorgeous newsletter! :D


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098