Outlook 2013 Cutting off top of image?

Question

I am setting up an email template and the top of a few images were being cut off. This is my code for the images

<td style="line-height: 0"><img src="http://domain.com/image.png"></td>

I have the line height on the td so that the white space underneath will be removed because I want it to be touching the image below.

Top image has a bit of the top being cut off though, how can I fix this?

Lange

Answer 1

The way I fixed this was to not use line-height and instead set the image to display block and this fixed the image issues and still removed the white space underneath

<td><img src="http://domain.com/image.png" style="display:block;"></td>

Hope this helps someone!

Lange

Answer 2

I had the same problem with ol 2013/16.

The best solution is to specify that the line-height is expressed in pixels.

Change line-height:0; to line-height: 0px.

Reply

Thanks, I couldn't figure this out for ages :D – Caceres

Late to the party, but I had to remove line-height altogether and just let Outlook do it's thing. (It was just a footer section so line height didn't matter much anyway) – Aurelie

You absolute legend. – Tuning

Answer 3

I set the line height to "1" and this fixed my issue :0)

<table>
  <tr>
    <td style="line-height:1;">
      <img src="http://example.com/138x33-team.png" width="138" height="33" style="display:block;">
    </td>
  </tr>
</table>

Gee

This worked for me! I had display: block; set and line-height set to the correct px value and couldn't figure out why Outlook was still cutting it off . . . – Sheilahshekel

it's 2022 now and it worked for me too! – Alexi

line-height:0 didn't work for me, 0px didn't work, 1 by itself didn't... but 1 !important did --- thank you! – Picardi

Using 1 for me worked – Vitelline

Answer 4

I spent way too much time on this issue, so might as well document my solution for anyone who may see this.

I solved the problem by nesting the image inside another table, like this:

<td style="line-height: 0">
<table>
  <tr>
    <td>
      <img src="http://example.com/image.png">
    </td>
  </tr>
</table>
</td>

Zack

Answer 5

My tests show that in Outlook 2013, unlike earlier Outlook versions, setting line-height to 0 will cause the container to be smaller than the contained image. The result is that the top of the contained image is cropped. The only way I could fix this was to set line-height to a value other than 0. I used line-height: 17px and the images displayed properly. It might work with any other value than 0 -- I didn't test values smaller than 17px.

Setting display: block did not fix this. Since this ONLY is a problem with Outlook 2013 and does not affect any earlier Outlook versions or other mobile or desktop email clients, it's safe to assume it's an Outlook 2013 bug and that a fix from Microsoft isn't to be expected. So if anyone can confirm my findings, it'd be a good idea to just integrate this workaround into your already oversized palette of workarounds to accommodate Microsoft's poor HTML email support.

Towhaired

Answer 6

All the answers here just work if you are using the Outlook client but when you'll go on outlook.com you will see some ugly white margin. To solve the issue on both side you have to encapsulate the img in a div.

<td style="line-height: 0">
   <div>
      <img valign="middle" style="display:block; margin: 0" src="imageURL">
   </div>
</td>

Parrott

Answer 7

Alway use Display:block on all images, or else you will get some white spaces from time to time :)

Unseasonable

Answer 8

I experienced this issue in MailChimp when inserting images in text blocks. To solve it, I set the line-height for text blocks to double space. After that, I reset all the styles for each block in my template. Hope this helps!

Payne

Answer 9

I had same problem in my email. i just remove mso-line-height-rule property form my mail it's works for me.

Swum

Answer 10

Email Outlook 2016 version issue. Add Line height 1; and display block to image

Fix

<td style="line-height: 1">
   <div>
      <img style="display:block;" src="imageURL">
   </div>
</td>

Beaulieu