0

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>
Tim Lehner
  • 14,813
  • 4
  • 59
  • 76
devlondoner
  • 127
  • 2
  • 11

3 Answers3

1

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.

John
  • 11,985
  • 3
  • 45
  • 60
0

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>
Luis Paulo Lohmann
  • 396
  • 2
  • 5
0

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.

gyula.nemeth
  • 847
  • 10
  • 9