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 (assuming a white background-color) -->
<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 using borders, 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 because the default value may be greater than the wanted height.
- The " " is there because some email clients won't render empty columns.
- You can remove the "colspan" and still will work, but is cleaner, especially when inspecting the element in the browser's console.
-->
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. This is important because some email clients does not support the <style>
tag:
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/
EDIT:
For problems using borders in outlook you may try adding this snippet to your email head (outlook supports <head>
tag):
<head>
<!--[if mso]>
<style type="text/css">
table {border-collapse:collapse; border-spacing:0; margin:0}
div, td {padding:0;}
div {margin:0 !important;}
</style>
<![endif]-->
</head>
Outlook assumes borders of the table cells should not overlap unless using border-collapse:collapse
in the table styles.
` which I found out by viewing email source after I set it up the way I wanted it.
– SSlinky Aug 23 '16 at 10:34