Avoid paddings and margins in newsletters, some email clients will ignore this properties.
You can use empty tr
and td
as was suggested (but this will result in a lot of html), or you can use borders with the same border color as the background of the email. so, instead of padding-top: 40px
you can use border-top: 40px solid #ffffff
(assuming that the background color of the email is #ffffff
)
I've tested this solution in gmail (and gmail for business), yahoo mail, outlook web, outlook desktop, thunderbird, apple mail and more. As far as I can tell, border property is pretty safe to use everywhere.
Example:
<!-- With paddings: WON'T WORK IN ALL EMAIL CLIENTS! -->
<table>
<tr>
<td style="padding: 10px 10px 10px 10px">
<!-- Content goes here -->
</td>
</tr>
</table>
<!-- Same result with borders and same border color of the background -->
<table>
<tr>
<td style="border: solid 10px #ffffff">
<!-- Content goes here -->
</td>
</tr>
</table>
<!-- Same result using empty td/tr. (A lot more html than borders, get messy on large emails) -->
<table>
<tr>
<td colspan="3" height="10" style="height: 10px; line-height: 1px"> </td>
</tr>
<tr>
<td width="10" style="width: 10px; line-height: 1px"> </td>
<td><!--Content goes here--></td>
<td width="10" style="width: 10px; line-height: 1px"> </td>
</tr>
<tr>
<td colspan="3" height="10" style="height: 10px; line-height: 1px"> </td>
</tr>
</table>
<!-- With tr/td every property is needed. height must be setted both as attribute and style, same with width, line-height must be setted JIC default value is greater than actual height and without the some email clients won't render the column because is empty. You can remove the colspan and still will work, but is annoying when inspecting the element in browser not to see a perfect square table -->
In addition, here is an excelent guide to make responsive newsletters without mediaqueries. The emails really works everywhere:
https://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries--cms-23919
And always remember to make styles inline:
https://inliner.cm/
To test emails, here is a good resource:
https://putsmail.com/
Finally, for doubts about css support in email clients you can go here:
https://templates.mailchimp.com/resources/email-client-css-support/
or here:
https://www.campaignmonitor.com/css/
<p style='margin-left:36.0pt'>
which I found out by viewing email source after I set it up the way I wanted it.