20

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?

10 Answers 10

29
+50

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.

3
  • 1
    Thanks, I couldn't figure this out for ages :D Dec 25, 2020 at 21:49
  • 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) Jan 7, 2021 at 17:18
  • You absolute legend.
    – benJ
    Feb 24, 2023 at 13:00
15

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!

14

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>

4
  • 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 . . .
    – Mary7678
    Feb 6, 2019 at 21:55
  • 1
    it's 2022 now and it worked for me too!
    – Alex K
    Sep 30, 2022 at 21:14
  • line-height:0 didn't work for me, 0px didn't work, 1 by itself didn't... but 1 !important did --- thank you! Apr 5, 2023 at 7:21
  • Using 1 for me worked
    – e11world
    Jun 7, 2023 at 23:14
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>
0
2

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.

1

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>

0

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

0

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!

0

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

0

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.