css padding is not working in outlook
Unfortunately, when it comes to EDMs (Electronic Direct Mail), Outlook is your worst enemy. Some versions don't respect padding when a cell's content dictates the cell dimensions.
The approach that'll give you the most consistent result across mail clients is to use empty table cells as padding (I know, the horror), but remember to fill those tables with a blank image of the desired dimensions because, you guessed it, some versions of Outlook don't respect height/width declarations of empty cells.
Aren't EDMs fun? (No. They are not.)
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.