Categories:
Outlook workaround for image

Remove unnecessary space below image in Outlook.com/ Hotmail/ Live web emails

Category : Email Design

Apple is surely the top email client but your list also includes subscribers using other email clients like Outlook and web versions like office365, outlook.com, Hotmail, live and other web version of outlook.

Needless to say, emails render differently on every email client and device. If your email is not optimized according to these parameters, your subscribers will not be able to see the email like you want them to.

Outlook.com/live/hotmail, for example, put forth a peculiar challenge when it comes to rendering images in emails.

Get a Quote >>”/></a></span><script charset=

Let’s unveil the technicality and coding enigma underneath.

What these web mails do is that they automatically add <div> before the image. Adding this will lead to appearance of gap below the image. When the same background color as that of the image is used, it won’t be much of a problem as it won’t be visible enough. On the top of it, if text is followed by image, it again won’t be visible. However, when background color is different or when two images are sitting one above another, this problem is clearly visible.

Why does this happen?

This happens as the email clients add div on its own; Strange why they keep adding their own tag in emails. Moreover, it also adds display:in-block so you see some extra space (around 3 to 5px) getting added at the bottom of image.

Have a look at the below screenshots to understand what exactly happens.

before workaround

This challenge is usually observed in latest apps, recently updated by them.

How to overcome this challenge?

Monks have come up with an idea that can help you overcome this challenge.

All you need to do is add below style in your <head> and remove the unnecessary space under the image.

div{ display:block !important;}

We obviously cannot remove the div which they are adding but then at least we can avoid adding extra space. So we overwrite the inline block with anotherblock to remove extra space.

 Here’s how it looks after the workaround.

after workaround

Wrapping Up

It surely feels like a huge accomplishment whenever we discover a workaround for the renderability issues of Outlook.

Have you faced similar challenges with any email client?

Share your ideas with the Monks in the comment box below.

The following two tabs change content below.
Kevin George
Kevin is the Head of Marketing at EmailMonks, one of the fastest growing email design and coding companies. He loves gadgets, bikes, jazz, and breathes ‘email marketing’. He is a brand magician who loves to engage, share insights with fellow marketers, and enjoys sharing his thoughts on the latest email marketing best practices at EmailMonks Blog.

10 thoughts on “Remove unnecessary space below image in Outlook.com/ Hotmail/ Live web emails”

  • I find myself combating a 1px gap under images and some CTAs in Outlook 2016 for Windows. Adding a above or below sometimes helps, but not always. Any ideas on that fix?

  • Jeff

    God Thank you!!! I’ve been looking for a solution since yesterday!

  • iwolf

    Thanks for article – but not working for me – the issue still remain.

    • Please send in the details of the issue that you are facing on hello(@)emailmonks(.)com.
      We would be happy to help. 🙂

  • Sarah

    Brilliant Thanks! This has been bugging me recently – do you know how long hotmail has had this issue for? display:block on the images used to work

  • Raenae

    This worked for me! Thanks so much! Just be sure to change your other div tags that have different display stylings than block to have the !important inline.

  • Sandra

    Interesting article. I have tried to solve it in my mail template, but unfortunately it doesn’t work. The issue still remain.

Leave a Reply

Your email address will not be published. Required fields are marked*