Outlook adding space in HTML email

Question

I know this is a common problem, I\'ve searched high and low for a solution. Everything I\'ve come across, I\'ve tried. If I had any hair left I would be pulling it out.

Answer 1

Outlook.com adds embedded CSS that overrides line heights, and both Outlook and Outlook.com don't support

margins very well, if at all: I found the

tag tip in an online forum (Campaign Monitor I think), but I could never get it to work consistently:

HTML/Inline CSS:

some text here

Do This to Fix The Issue

To override Outlook.com line-height, do the following:

Embedded CSS:

.ExternalClass * { line-height:105%; }

For consistent padding/margins across all email clients/user agents, I use tags and padding (no margin attributes) to the container:

HTML/Inline CSS

  Text Goes Here

Note: I add a class name to style for responsive design where supported.

Note: I found mso-line-height-rule: exactly for Outlook 2003/2007/2010/2013. It only works if used on a block-level element, and it must be listed as the first attribute before line-height (like in the example above).

General Tips:

• Add all inline styles to block-level tags if possible.
• Put headings and the related content that follows in separate table rows so I can add padding to the containing of the heading. It may be a little excessive, but it gives you more control on spacing than anything else I've found.

HTML/Inline CSS:

  
    Heading goes here
  


  
    This is the body of the text, Lorem Ipsum yadda yadda.