我正在尝试构建一个有点复杂的html电子邮件，我遇到填充问题。
我有一张有三个牢房的桌子。第一个单元格是左侧的间隔单元格。第二个单元格中有一个表来保存文本。第三个单元格有一个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>
答案 0 :(得分：1)
它导致问题的最后style="padding-top: 8px;"中的<td>。将其更改为此可解决Outlook 2007/10/13和Gmail中的问题：
<td width="125" valign="top">
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td 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>
</td>
不确定您的代码段之外的代码是什么，但在<head>中添加一些CSS重置将有助于进一步防范此问题。我在你的例子中添加了一些，这里是完整的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
/* What it does: Remove spaces around the email design added by some email clients. */
/* Beware: It can remove the padding / margin and add a background color to the compose a reply window. */
html,
body {
margin: 0 auto !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
}
/* What it does: Stops Outlook from adding extra spacing to tables. */
table,
td {
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
/* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
margin: 0 auto !important;
}
table table table {
table-layout: auto;
}
</style>
</head>
<body width="100%" style="margin: 0;">
<table border="0" width="100%" bgcolor="#ccd6df" cellspacing="0" cellpadding="0">
<tr>
<td width="142" style="line-height: 0; font-size: 0;"> </td>
<td width="310" valign="top" bgcolor="red">
<table style="text-align: left; border-collapse:collapse;" border="0" bgcolor="#ccd6df" cellspacing="0" cellpadding="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">
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td 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>
</td>
</tr>
</table>
</body>
</html>