Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 476
Timothy Adams Avatar asked Mar 23 '23 14:03

Timothy Adams


1 Answers

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.

like image 198
Town Avatar answered Mar 31 '23 11:03

Town