Html css padding 在 Outlook 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21474239/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
css padding is not working in outlook
提问by Mukesh
I have following html in email template.
我在电子邮件模板中有以下 html。
I am getting different view in MS Outlook and in gmail for the same.
我在 MS Outlook 和 gmail 中看到不同的观点。
<tr>
<td bgcolor="#7d9aaa" style="color: #fff; font-size:15px; font-family:Arial, Helvetica, sans-serif; padding: 12px 2px 12px 0px; ">
<span style="font-weight: bold;padding-right:150px;padding-left: 35px;">Order Confirmation </span>
<span style="font-weight: bold;width:400px;"> Your Confirmation number is {{var order.increment_id}} </span></td>
</tr>
How to fix this?
如何解决这个问题？
采纳答案by Mukesh
I changed to following and it worked for me
我改为跟随，它对我有用
<tr>
<td bgcolor="#7d9aaa" style="color: #fff; font-size:15px; font-family:Arial, Helvetica, sans-serif; padding: 12px 2px 12px 0px; ">
<table style="width:620px; border:0; text-align:center;" cellpadding="0" cellspacing="0">
<td style="font-weight: bold;padding-right:160px;color: #fff">Order Confirmation </td>
<td style="font-weight: bold;width:260px;color: #fff">Your Confirmation number is {{var order.increment_id}} </td>
</table>
</td>
</tr>
Update based on Bsalex request what has actually changed.I replaced span tag
根据 Bsalex 请求更新实际更改的内容。我替换了跨度标签
<span style="font-weight: bold;padding-right:150px;padding-left: 35px;">Order Confirmation </span>
<span style="font-weight: bold;width:400px;"> Your Confirmation number is {{var order.increment_id}} </span>
with table and td tags as following
表和 td 标签如下
<table style="width:620px; border:0; text-align:center;" cellpadding="0" cellspacing="0">
<td style="font-weight: bold;padding-right:160px;color: #fff">Order Confirmation </td>
<td style="font-weight: bold;width:260px;color: #fff">Your Confirmation number is {{var order.increment_id}} </td>
</table>
回答by monners
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.
不幸的是，当谈到 EDM（电子直邮）时，Outlook 是您最大的敌人。当单元格的内容决定单元格尺寸时，某些版本不考虑填充。
The approach that'll give you the most consistentresult 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.
在邮件客户端中为您提供最一致结果的方法是使用空表格单元格作为填充（我知道，这很可怕），但请记住用所需尺寸的空白图像填充这些表格，因为您猜对了，某些版本的 Outlook 不尊重空单元格的高度/宽度声明。
Aren't EDMs fun? (No. They are not.)
EDM 不好玩吗？（不，他们不是。）
回答by Rahul J. Rane
To create HTML in email template that is emailer/newsletter, padding/margin is not supporting on email clients. You can take 1x1 size of blank gif image and use it.
要在电子邮件发送者/时事通讯的电子邮件模板中创建 HTML，电子邮件客户端不支持填充/边距。您可以使用 1x1 大小的空白 gif 图像并使用它。
<tr>
<td align="left" valign="top" style="background-color:#7d9aaa;">
<table width="640" cellspacing="0" cellpadding="0" border="0">
<tr>
<td align="left" valign="top" colspan="5"><img style="display:block;" src="images/spacer.gif" width="1" height="10" alt="" /></td>
</tr>
<tr>
<td align="left" valign="top"><img style="display:block;" src="images/spacer.gif" width="20" height="1" alt="" /></td>
<td align="right" valign="top"><font face="arial" color="#ffffff" style="font-size:14px;"><a href="#" style="color:#ffffff; text-decoration:none; cursor:pointer;" target="_blank">Order Confirmation</a></font></td>
<td align="left" valign="top" width="200"><img style="display:block;" src="images/spacer.gif" width="200" height="1" alt="" /></td>
<td align="left" valign="top"><font face="arial" color="#ffffff" style="font-size:14px;">Your Confirmation Number is 260556</font></td>
<td align="left" valign="top"><img style="display:block;" src="images/spacer.gif" width="20" height="1" alt="" /></td>
</tr>
<tr>
<td align="left" valign="top" colspan="5"><img style="display:block;" src="images/spacer.gif" width="1" height="10" alt="" /></td>
</tr>
</table>
</td>
</tr>
回答by Raj_89
Just use<Table cellpadding="10" ..>
...
</Table>
Don't use px.Works in MS-Outlook.
只使用<Table cellpadding="10" ..>
...
</Table>
不要在 MS-Outlook 中使用 px.Works。
回答by Sachi Cortes
Avoid paddings and margins in newsletters, some email clients will ignore this properties.
避免通讯中的填充和边距，一些电子邮件客户端将忽略此属性。
You can use empty trand tdas 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: 40pxyou can use border-top: 40px solid #ffffff(assuming that the background color of the email is #ffffff)
您可以使用空的tr和td建议的（但这会导致大量的 html），或者您可以使用与电子邮件背景颜色相同的边框。所以，而不是padding-top: 40px你可以使用border-top: 40px solid #ffffff（假设电子邮件的背景颜色是#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.
我已经在 gmail（和商业 gmail）、雅虎邮件、Outlook Web、Outlook 桌面、雷鸟、苹果邮件等中测试了这个解决方案。据我所知，边界属性在任何地方都可以安全使用。
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>
In addition, here is an excelent guide to make responsive newsletters without mediaqueries. The emails really works everywhere:
此外，这里是制作没有媒体查询的响应式新闻通讯的优秀指南。电子邮件确实适用于任何地方：
And always remember to make styles inline:
并且永远记住使样式内联：
To test emails, here is a good resource:
要测试电子邮件，这里有一个很好的资源：
Finally, for doubts about css support in email clientsyou can go here:
最后，如果您对电子邮件客户端中的 css 支持有疑问，您可以访问这里：
https://templates.mailchimp.com/resources/email-client-css-support/
https://templates.mailchimp.com/resources/email-client-css-support/
or here:
或在这里：
回答by Subbu
Padding will not work in Outlook. Instead of adding blank Image, you can simply use multiple spaces(& nbsp;) before elements/texts for padding left For padding top or bottom, you can add a div containing just spaces(& nbsp;) alone. This will work!!!
填充在 Outlook 中不起作用。您可以简单地在元素/文本之前使用多个空格（& nbsp;）来填充左侧，而不是添加空白图像，对于填充顶部或底部，您可以添加一个仅包含空格（& nbsp;）的 div 。这会奏效！！！
回答by Jacob
I had the same problem and ended up actually using borderinstead of padding.
我遇到了同样的问题，最终实际上使用了border而不是padding.
回答by John
Do this instead:
改为这样做：
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#7d9aaa" width="40%" style="color: #ffffff; font-size:15px; font-family:Arial, Helvetica, sans-serif; font-weight: bold; padding:12px;">
Order Confirmation
</td>
<td bgcolor="#7d9aaa" align="right" width="60%" style="color: #ffffff; font-size:15px; font-family:Arial, Helvetica, sans-serif; font-weight: bold; padding:12px;">
Your Confirmation number is {{var order.increment_id}}
</td>
</tr>
</table>
It is better to use two cells and align the content, than using large padding and 's.
最好使用两个单元格并对齐内容，而不是使用大填充和 's。
回答by Fab
After doing many tests in Litmus, i could not find a way to have perfect rendering in all emails readers, but here is the better solution i found :
在 Litmus 中进行了多次测试后，我找不到在所有电子邮件阅读器中都能完美呈现的方法，但这是我找到的更好的解决方案：
<table width="100%" cellpadding="0" cellspacing="0" style="background-color:#333;color:#fff;border-radius:3px;border-spacing:0;" >
<tr>
<td style="width:12px;" > </td>
<td valign="middle" style="padding-top:6px;padding-bottom:6px;padding-right:0;padding-left:0;" >
<span style="color:#fff;" ><strong>Your text here</strong> and here</span></a>
</td>
<td style="width:12px;" > </td>
</tr>
</table>
In this piece of code, i aimed to emulate padding : 6px 12px;
在这段代码中，我的目标是模拟padding : 6px 12px;
There are 2 "12px table columns" that handles the right and left padding.
有 2 个“12px 表格列”处理左右填充。
And I'm using "padding: 6px 0;" on my td content, to manage top and bottom padding : Outlook 2010 and 2013 will ignore this and will use their own padding.
我正在使用“填充：6px 0;” 在我的 td 内容上，管理顶部和底部填充：Outlook 2010 和 2013 将忽略这一点并使用自己的填充。
The text won't be perfectly aligned in Outlook 2010 and Outlook 2013 (slightly too far from top) but it works with all other email readers i tried : Apple Mail, Gmail, Outlook 2011 (yes..), Hotmail, Yahoo and many more.
文本在 Outlook 2010 和 Outlook 2013 中不会完全对齐（离顶部稍远）但它适用于我尝试过的所有其他电子邮件阅读器：Apple Mail、Gmail、Outlook 2011（是的......）、Hotmail、Yahoo 和许多更多的。
Preview image : Outlook 2010 and 2013 preview
回答by Carliczyk
Make sure to throw on the !importantfor Outlook especially.
确保!important特别使用for Outlook。
td {
border-collapse: separate;
padding: 15 !important
}
I also wanted borders, so might not work for someone who doesn't.
我也想要边界，所以可能不适用于没有边界的人。
