Ben Ben - 2 years ago 119
CSS Question

Add Spacing to TD in Outlook (HTML Email)

I am currently building an email newsletter and testing in Litmus.

The newsletter should look like this (see image below):

https://image.ibb.co/f4L7ma/Screen_Shot_2017_08_16_at_10_44_25.png

Obviously, it isn't going to look as perfect in Outlook, but is there any way stylistically to add spacing in between the tags in Outlook.

This is how the newsletter is rendering in Outlook 2013 (windows 7):

https://image.ibb.co/itK06a/Screen_Shot_2017_08_16_at_10_44_11.png

Please note, I am in early testing stages, and I am only concerned about the spacing for the time being.

I have attached the code for this section below:

<!-- Main Changes Content Row One Starts -->
<tr>
<!-- Row One left Box Starts -->
<td align="left" width="48%" bgcolor="#FFFFFF" style="padding-left:20px;padding-right:20px;padding-top: 20px;color: #222222; text-decoration: none;" class="100p mobile-column">
<font face="'Open Sans', Arial, sans-serif">
<!-- Change Text Here -->
<span style="font-size:15px;font-weight: 400;color: #222222; text-decoration: none;">
<strong>-</strong> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officiia.</span>
<br /><br />
</font>
</td>
<!-- Row One left Box Ends -->

<!-- Row One Right Box Starts -->
<td align="left" width="48%" bgcolor="#FFFFFF" style="padding-left:20px;padding-right:20px;padding-top: 20px;color: #222222; text-decoration: none;" class="100p mobile-column">
<font face="'Open Sans', Arial, sans-serif">
<!-- Change Text Here -->
<span style="font-size:15px;font-weight: 400;color: #222222; text-decoration: none;">
<strong>-</strong> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officiia.</span>
<br /><br />
</font>
</td>
<!-- Row One Right Box Ends -->
</tr>
<!-- Main Changes Content Row One Ends -->


If anyone has a good workaround for this in Outlook, that would be great.

Answer Source

outlook does avoid using padding and margin, so here it is the good approach to add td in a row to add spacing. Moreover outlook only consider system font rather than google fonts. And use width in pixels instead of percentage.

<tr>
   <!-- Row One left Box Starts -->
   <td align="left" width="290" bgcolor="#FFFFFF" style="padding-left:20px;padding-right:20px;padding-top: 20px;color: #222222; text-decoration: none;" class="100p mobile-column">
   <font face="'Open Sans', Arial, sans-serif">
   <!-- Change Text Here -->
   <span style="font-size:15px;font-weight: 400;color: #222222; text-decoration: none;">
   <strong>-</strong> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officiia.</span>
   <br /><br />
   </font>
   </td>
   <!-- Row One left Box Ends -->
   <td align="left" width="20" bgcolor="#f5f4f4" class="100p mobile-column"></td>
   <!-- Row One Right Box Starts -->
   <td align="left" width="290" bgcolor="#FFFFFF" style="padding-left:20px;padding-right:20px;padding-top: 20px;color: #222222; text-decoration: none;" class="100p mobile-column">
   <font face="'Open Sans', Arial, sans-serif">
   <!-- Change Text Here -->
   <span style="font-size:15px;font-weight: 400;color: #222222; text-decoration: none;">
   <strong>-</strong> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officiia.</span>
   <br /><br />
   </font>
   </td>
    <!-- Row One Right Box Ends -->
</tr> 
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download