CODEWITHSUNDEEP
html-emailoutlook.com
devlondoner
devlondoner

Reputation: 127

Extra margin and line-space added to images in Outlook.com

I may be missing something obvious but for some reason Outlook.com is overriding the margin and line-height for the P tag it conveniently wraps all images in. Any solutions to remove this unwanted space at the bottom?

<table width="196" cellspacing="0" cellpadding="0" border="0" style="border-collapse:collapse">
 <tr>
   <td valign="top" align="left" width="196" height="45">
     <table width="196" cellspacing="0" cellpadding="0" border="0" style="border-collapse:collapse">
        <tr>
          <td style="font-size:0;line-height:0;border-collapse:collapse;border-bottom:1px solid #BBBBBB;padding:0;border-collapse:collapse;background:red;" valign="top" align="left" width="196">
             <a href="" style="font-size:0;line-height:0;" target="_blank">
                <img style="width:137px;height:44px;display:block;" src="" width="137" height="44" alt=""/></a>
           </td>
         </tr>
      </table>
    </td>
  </tr></table>

Upvotes: 0

Views: 3981

Answers (3)

gyula.nemeth
gyula.nemeth

Reputation: 867

You have to put the following into the head style part:

img {
    line-height:100%;
}

Actually, outlook.com converts it into the following, but it will work!

.ExternalClass img {
    line-height: 100%;
}

We use this solution at app.edmdesigner.com for images, and it works perfectly.

Upvotes: 0

Luis Paulo Lohmann
Luis Paulo Lohmann

Reputation: 414

Composing e-mails in Outlook is a pain...I managed to get rid of the extra space between images by putting style="border-collapse:collapse; line-height:0;" in the TD tag and explicitly setting all width and height. And Don't forget to put style="display:block;" in your IMG tags to cover all clients.

    <td width="400" height="100" style="border-collapse:collapse;line-height:0;"><img src="myimage.jpg" width="400" height="100" style="display:block; border:0; outline:none; text-decoration:none; -ms-interpolation-mode:bicubic;"></td>

Upvotes: 0

John
John

Reputation: 12183

put this in your header style tag:

p {margin: 1em 0;}

As the p tags are inserted at rendertime, you need to overwrite it in the style tag.

Upvotes: 1

Related Questions