Padding in Email Stationery

Oftentimes padding shows up a bit differently based on e-mail service. You may experiment by sending a test to an outlook account, gmail account, etc to see if that is the display difference.

https://www.campaignmonitor.com/css/



Shows all the CSS tags, and the compatibility with each client.



According to this, padding is not supported on P, DIV or A tags in Outlook. And Margin is not supported in outlook.com.

Can you give an example of the best way to do padding? In our code, we often do line breaks to break things up, but that looks differently for Outlook than it does for other clients -- and your comments seem to confirm that


For example, inside a table cell, we might have text, and then use the <br> or <br /> tag, like this:


<td>

<tr>

This is the first line of text.

<br />

<br />

This is the second.

</tr>

</td>


Can you show me how to better use code to fix this? Thank you!

Daniel Volk:

Brian is right in that padding will not be supported in p, div, or a tags in outlook. The best approach would be to add padding to the table cell that the text is contained in (the <td> tag).

Sarah,


The most foolproof way to add padding to any element will always be to add it to the table cell:


<table cellpadding="0" cellspacing="0" border="0">

<tr>

<td style="padding:10px;">

...

<td>

<tr>

</table>


If you are just looking to add space between paragraphs of text, the method you are currently using by adding two break tags is fairly common and should work just fine (although the exact size of the line breaks can sometimes vary slightly). If this is still causing problems for you in Outlook, feel free to send a specific code example and I'd be happy to take a look.

Sarah Royal:

Can you give an example of the best way to do padding? In our code, we often do line breaks to break things up, but that looks differently for Outlook than it does for other clients -- and your comments seem to confirm that


For example, inside a table cell, we might have text, and then use the <br> or <br /> tag, like this:


<td>

<tr>

This is the first line of text.

<br />

<br />

This is the second.

</tr>

</td>


Can you show me how to better use code to fix this? Thank you!

No problem Sarah! To get consistent spacing between items in your list, instead of using a <br> tag, you can add margins to each item in the list like this:


<ol style="padding: 0; margin: 0 0 0 40px;”> /* Margin to control list indent */

<li style="margin: 10px 0 10px 0;">Text for #1</li> /* Top and bottom margins */

<li style="margin: 10px 0 10px 0;">Text for #2</li>

</ol>



I would also add this code at the top of your email:


<!--[if gte mso 9]>

<style>

li {

text-indent: -1em;

}

</style>

<![endif]-->


This will keep the spacing between the numbers and text consistent in older versions of outlook.

Sarah Royal:

Thanks, Daniel! I'm actually having a specific issue right now with line items and spacing. I'm using a single line break to break up an <ol>, like this:


<ol>

<li>text for #1</li>

<br />

<li>text for #2</li>

<br />


etc.


The entire list is inside a single cell, so not sure if the padding thing will work. Should I put them all in separate cells? I've attached a screenshot of what it looks like in Gmail, Outlook, and Hotmail respectively -- obviously I'd like it to look like the first one, but how can I prevent them from looking different in different email clients?


Thank you so much for your time!

Daniel Volk:

Sarah,


The most foolproof way to add padding to any element will always be to add it to the table cell:


<table cellpadding="0" cellspacing="0" border="0">

<tr>

<td style="padding:10px;">

...

<td>

<tr>

</table>


If you are just looking to add space between paragraphs of text, the method you are currently using by adding two break tags is fairly common and should work just fine (although the exact size of the line breaks can sometimes vary slightly). If this is still causing problems for you in Outlook, feel free to send a specific code example and I'd be happy to take a look.

Sarah Royal:

Can you give an example of the best way to do padding? In our code, we often do line breaks to break things up, but that looks differently for Outlook than it does for other clients -- and your comments seem to confirm that


For example, inside a table cell, we might have text, and then use the <br> or <br /> tag, like this:


<td>

<tr>

This is the first line of text.

<br />

<br />

This is the second.

</tr>

</td>


Can you show me how to better use code to fix this? Thank you!