Avoid Outlook rendering issues with email previews

Certain versions Avoid Outlook rendering of Outlook will remove padding in a lot of situations, though you may have more luck with margins. It’s also important to remember that every desktop version of Outlook won’t support the styling of> tags, so if you’re using for your layout remember to employ the  wrapping the dives in Outlook specific tables to allow you to style those for Outlook.

How you  in your email code is important and if you’re having trouble getting the spacing you want in Outlook you can take a deeper dive into

5.   Outlook adds a border to table cells.

A bug in Outlook 2016 adds a 1-pixel border around table cells in emails. This may not be a major problem unless you  Phone Number Data need your email template to line up perfectly.

To get rid of this extraembedded or inline. This CSS property indicates whether cells have a shared or separate border. Setting the property to the collapse value means it combines to a single border.

6.   Outlook ignores link styling.

phone number list

In certain cases Outlook will not apply the link styling you’ve applied to your hyperlinks.

Specifically, Outlook will strip the styling from  tags without an her value or links that don’t have  which can be annoying if you’re using them as anchors to navigate the email, using maillot links, or using placeholder links for testing purposes.

If you need to test an email before you have live URLs for that email, consider using a placeholder link that includes a

If you find that Outlook is stripping your styles from a maillot or internal anchor link, simply wrap the  and apply your styling to the surrounding span.

7.   Resizing non-native images in Outlook.

Outlook will always try to render your images at their native dimensions which can be annoying when you’re creating larger images and scaling them down, a

While most email clients Aero leads will respect your CSS, Outlook will not respect CSS to resize images. That’s why it’s important when resizing images to define the attributes in HTML for Outlook. You’ll only need to define the width, Outlook will resize the height accordingly to maintain the proper image proportions.

Match the background color.

If you just need a very quick fix and your design allows for it, you can match the background color on your problem section to the containing section.

It’s the definition of painting over the cracks, but it certainly works for a quick, no-mess fix.

Add some Microsoft specific code

If you’ve exhausted your other options you can try this code snippet directly in your code’s head section. Here we’re targeting Outlook and collapsing table borders

Scroll to Top