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

Remove the <p> tags, mail clients don't always respect styling on those and they'll automatically add an extra line break afterwards.

You can replace the <p> with a <span> if needs be, as <span> doesn't come with any 'free' padding.

Answer 2

Outlook.com adds embedded CSS that overrides line heights, and both Outlook and Outlook.com don't support<p> margins very well, if at all: I found the <p> tag tip in an online forum (Campaign Monitor I think), but I could never get it to work consistently:

HTML/Inline CSS:

<p style="margin-bottom:0;margin:0 0 1em;padding:0;">some text here</p>

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 <span> tags and padding (no margin attributes) to the <td> container:

HTML/Inline CSS

<td class="classname" style="padding-bottom: 3px; font-family: Arial, sans-serif; font-size: 13px; mso-line-height-rule: exactly; line-height: 15px;">
  Text Goes Here
</td>

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 <td> 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:

<tr>
  <td class="introHead" style="padding-bottom:3px;color:#000000;font-family:Arial;font-size:16px;">
    Heading goes here
  </td>
</tr>
<tr>
  <td class="introCopy" style="color:#000000;font-family:Arial;font-size:16px;">
    This is the body of the text, Lorem Ipsum yadda yadda.
  </td>
</tr>