2
我想構建一個有點複雜的html電子郵件,我遇到了填充問題。表格頂部的HTML電子郵件填充Outlook 2010
我有一個三個單元格的表。第一個單元格是左側的間隔單元格。第二個單元格中有一個表格來保存文本。第三個單元格有一個CTA按鈕(圖像)。
中心單元格頂部有額外的填充,我無法弄清楚它來自哪裏。
我的目標是在中間單元格頂部填充4px,在右側單元格填充8px。這樣,中間單元格中標題文本底部的邊框(「單元中的隨機副本」)與右側單元格中的CTA按鈕對齊。
當我在Outlook 2010和Gmail IOS應用程序中測試時,看起來好像在中間單元格上有額外的填充(看起來像是縮進填充的兩倍)。
<table border="0" width="100%" bgcolor="#ccd6df" cellspacing="0" cellpadding="0">
<tr>
<td width="142"></td>
<td width="310" style="padding: 0;">
<table style="text-align: left; border-collapse:collapse;" border="0" bgcolor="#ccd6df" cellspacing="0" cellpading="0">
<tr>
<td width="325" colspan="2" style="border-collapse:collapse; border-bottom: 1px solid #000; font-size: 14px; padding-top: 4px;">
Random Copy In Cell
</td>
</tr>
<tr>
<td>
<table bgcolor="#ccd6df" width="160" border="0" cellpadding="0" cellspacing="0" style="line-height: 14px; font-family: sans-serif; color: #333333; text-align: left;">
<tr>
<!-- Model Specs -->
<td style="padding-bottom: 2px; padding-top: 4px">
<p style="font-size: 11px; margin-bottom: 0;">
<img width="7" src="https://mlsvc01-prod.s3.amazonaws.com/6f8ceec6001/30740807-42b8-4307-bccc-62ae9c6064b5.png?ver=1466649683000" /> <span style="padding-bottom: 1px;">Headline Copy</span>
</p>
</td>
</tr>
<tr>
<td style="text-align: left; padding-left: 10px; padding-bottom: 10px;">
<p style="font-size: 9px; padding-left: 2px; padding-top: 0; margin-top: 0; margin-bottom: 2px;">
- The first selling point
<br /> - The second selling point
<br /> - The third sell point/
<br /> The fourth selling point
<br /> - Selling point
</p>
</td>
<!-- Model Specs -->
</tr>
</table>
</td>
<td>
<table bgcolor="#ccd6df" width="140" border="0" cellspacing="0" style="line-height: 14px; font-family: sans-serif; color: #333333; text-align: left;">
<tr>
<!-- Model Specs -->
<td style="padding-bottom: 0px; padding-top: 4px;">
<p style="font-size: 11px; margin-bottom: 0;">
<img width="7" src="https://mlsvc01-prod.s3.amazonaws.com/6f8ceec6001/30740807-42b8-4307-bccc-62ae9c6064b5.png?ver=1466649683000" /> <span style="padding-bottom: 1px;">Another selling point</span>
<span style="font-size: 9px; padding-top: 0; margin-top: 0; margin-bottom: 2px;">
<br /> - Another selling point </span>
<br /> <img width="7" src="https://mlsvc01-prod.s3.amazonaws.com/6f8ceec6001/30740807-42b8-4307-bccc-62ae9c6064b5.png?ver=1466649683000" /> <span style="padding-bottom: 1px;">Selling point</span>
<br /> <img width="7" src="https://mlsvc01-prod.s3.amazonaws.com/6f8ceec6001/30740807-42b8-4307-bccc-62ae9c6064b5.png?ver=1466649683000" /> <span style="padding-bottom: 1px;">Last selling point</span>
<br />
<br />
<br />
<br />
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td width="125" valign="top" style="padding-top: 8px;">
<a href="http://google.com/"><img src="https://mlsvc01-prod.s3.amazonaws.com/6f8ceec6001/e21a0a7c-ccb7-4287-b1bb-52c626cd069e.jpg?ver=1469823545000" /></a>
</td>
</tr></table>