CODEWITHSUNDEEP
htmloutlookhtml-tablehtml-email
Timothy Adams
Timothy Adams

Reputation: 211

Outlook adding space in HTML email

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.

I have a table that has a series of bullet points. The problem with this table is that whenever I create a new row, Outlook decides to add extra spacing below each row, making my table look larger than it should be.

<style type="text/css">
  .ExternalClass table, .ExternalClass tr, .ExternalClass td {line-height: 100%;}
</style>

<table width="400" align="left" cellpadding="0" cellspacing="0" border="0">
  <tr style="margin:0px; padding:0px;">
    <td width="10" align="right" valign="top" style="border:none; margin:0px; padding:0px;">
      <p style="margin:0px; padding:0px;">
      &bull;
      </p>
    </td>
    <td width="380" align="left" valign="top" style="border:none; margin:0px; padding:0px;">
      <p style="margin:0px; padding:0px;">
      Info next to bullet
      </p>
    </td>
  </tr>
  <tr style="margin:0px; padding:0px;">
    <td width="10" align="right" valign="top" style="border:none; margin:0px; padding:0px;">
      <p style="margin:0px; padding:0px;">
      &bull;
      </p>
    </td>
    <td width="380" align="left" valign="top" style="border:none; margin:0px; padding:0px;">
      <p style="margin:0px; padding:0px;">
      Info next to bullet
      </p>
    </td>
  </tr>
</table>

Things I've tried that did not work:

border-collapse:collapse

display:block

display:inline-block

float:left

Upvotes: 6

Views: 30341

Answers (2)

josh1978
josh1978

Reputation: 748

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>

Upvotes: 2

Town
Town

Reputation: 14906

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.

Upvotes: 7

Related Questions