我在電子郵件模板中有以下html。
我在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>在Gmail中
在展望中
如何解決這個問題？
不幸的是，說到EDMs(電子直郵)，Outlook是你最大的敵人。當單元格的內容決定單元格的尺寸時，有些版本不考慮填充。
為您提供跨郵件客戶端的最一致結果的方法是使用空的表格單元格作為填充(我知道這很恐怖)，但是請記住用所需尺寸的空白圖像填充這些表格，因為，您已經猜到了，某些版本的Outlook不支持空單元格的高度/寬度聲明。
EDMs很好玩吧？(不，他們不是。)
避免簡訊中的填充和邊距，一些電子郵件客戶端會忽略這些屬性。
你可以用& quot空& quot建議使用tr和td(但這會產生大量的html)，或者你可以使用與郵件背景顏色相同的邊框。所以，你可以用border-top: 40px solid #ffffff代替padding-top: 40px(假設電子郵件的背景色是#ffffff)
我已經在gmail(和gmail for business)、雅虎郵箱、outlook web、outlook桌面、雷鳥、蘋果郵箱等平臺測試了這個解決方案。據我所知，邊境財產在任何地方使用都非常安全。
示例:
<!-- 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.
-->此外，這里有一個很好的指南，可以讓你在沒有媒體詢問的情況下做出及時的回應。電子郵件在任何地方都有效:
https://web design . tuts plus . com/tutorials/creating-a-future-proof-responsive-email-without-media-queries-CMS-23919
并且永遠記得內聯樣式。這很重要，因為有些電子郵件客戶端不支持& ltstyle & gt標簽:
https://inliner.cm/
要測試電子郵件，這里有一個很好的資源:
https://putsmail.com/
最后，如果你對電子郵件客戶端的css支持有疑問，你可以點擊這里:
https://templates . mailchimp . com/resources/email-client-CSS-support/
或者這里:
https://www.campaignmonitor.com/css/
編輯:
對于在outlook中使用邊框的問題，您可以嘗試將此代碼片段添加到您的電子郵件標題中(outlook支持& lthead & gt標簽):
<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假定表格單元格的邊框不應重疊，除非在表格樣式中使用border-collapse:collapse。
我改變了跟隨，這對我很有效
<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>基于Bsalex請求更新實際更改的內容。 我替換了span標簽
<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標簽如下
<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>要在作為電子郵件/時事通訊的電子郵件模板中創建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>就用 & lt表格單元格padding="10 "..& gt ... & lt/Table & gt； 不要用px。在MS-Outlook中工作。
填充在Outlook中不起作用。 您可以簡單地使用多個空格(& ampnbsp)在元素/文本之前，用于左填充 為了填充頂部或底部，您可以添加一個只包含空格的div(& amp；nbsp)一個人。 這能行！！！
我也有同樣的問題，最后實際上使用了邊框而不是填充。
請改為這樣做:
<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>使用兩個單元格并對齊內容比使用大的填充和& ampnbsp南
在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>在這段代碼中，我的目標是模擬填充:6px 12px
有2個“12px表格列”處理左右填充。
而我用的是“填充:6px 0；在我的td內容上，管理頂部和底部填充:Outlook 2010和2013將忽略這一點，并將使用自己的填充。
文本在Outlook 2010和Outlook 2013中不會完全對齊(離頂部稍微有點遠),但它適用于我嘗試過的所有其他電子郵件閱讀器:蘋果郵件、Gmail、Outlook 2011(是的..)、Hotmail、雅虎等等。
預覽圖像:Outlook 2010和2013預覽
預覽圖片:Gmail、Apple Mail和其他
在某些情況下，我們設置邊框而不是填充，它在outlook中工作。
border: solid #efeeee;border-width: 20px 40px;一定要穿上！對Outlook尤其重要。
td {
border-collapse: separate;
padding: 15 !important
}我也想要邊框，所以可能不適合沒有邊框的人。
你試過display:inline-block；？
我的解決方案是使用一個空的/任何需要的透明的間隔gif，因為填充不是100%支持的。
<td width="2" style="font-size:1px; line-height:1px;" bgcolor="#FFFFFF">
<img width="2" border="0" src="spacer50.gif" style="display:block;
padding:0; margin:0; border:none;" />
</td>包括填充在內的所有樣式都必須添加到td，而不是span。
另一種解決方案是將文本放入& ltp & gttext & lt/p & gt；并定義邊距，這應該給出所需的填充。
例如:
<p style="margin-top: 10px; margin-bottom: 10; margin-right: 12; margin-left: 12;">text</p>我相信我們可以在& ltp & gt如果我們也使用mso-line-height-rule:exactly，則在Windows Outlook客戶端中的元素之間提供空間；在行高之前。
<p style="font-size:12px; mso-line-height-rule:exactly; line-height:1.00; margin:0 0 1em 0;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vestibulum nunc feugiat porta conseswctetur. Sedi dolor.</p>
<p style="font-size:12px; mso-line-height-rule:exactly; line-height:2.00; margin:0 0 2em 0;">Phasellus convallis, mauris ac vehicula posuere, ligula magna mattis ipsum, in sollicitudin nuddibh lacus eget sapien.</p>
<p style="font-size:12px; mso-line-height-rule:exactly; line-height:3.00; margin:0 0 4em 0;">Id semper sem pharetra vel. Sed ut erat auctor lectus pretium blandit gravida vitae enim. Nullam eget ex semeerst.</p>石蕊展望2016 (Win 7)預覽版
石蕊展望2019 (Win)預告
石蕊展望365(贏)