我想发送一封电子邮件，其中包含一个橙色的按钮，但我的电子邮件已经有了绿色背景颜色，所以我在按钮周围有一个空白区域。我的代码见下表：
<div style="background-color:#18A355">
<table align="center" bgcolor="#f79026" border="0" cellpadding="5" height="30" style="max-width: 600px; border-spacing: 0px; border-width: medium; border-style: none;" width="150">
<tbody>
<tr style="border-spacing: 0px;">
<td style="vertical-align: middle; text-align: center; border-spacing: 0px;"><a href="#" style="text-decoration:none; color:#FFFFFF; text-align:center; font-family:trebuchet ms">REGISTER NOW</a></td>
</tr>
</tbody>
</table>
</div>
我尝试使用和不使用DIV。
添加以下代码！
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div style="background-color:#18A355;">
<div style="text-align: center;"><span style="font-family:trebuchet ms"> </span></div>
<div style="text-align: center;"><span style="font-family:trebuchet ms"><a class="validating" href="https://www.horizoncurriculum.com" target="blank"><img alt="Horizon Curriculum Logo" src="https://hostedimages-cdn.aweber-static.com/OTg5NTM0/original/149a4444699b492f83f1a5f8312cd6e9.png" style="width: 200px; height: 81px; border: 0px none; outline-width: medium; outline-style: none; text-decoration: none;" /></a></span></div>
<div style="text-align: center;"><span style="font-family:trebuchet ms"> </span></div>
<div style="text-align: center;"><span style="font-family:trebuchet ms"> </span></div>
<div style="text-align: center;"><span style="font-family:trebuchet ms"><span style="font-family:trebuchet ms"><span style="font-family:trebuchet ms"><span style="font-family:trebuchet ms"><span style="color:#FFFFFF">Dear {!lastname_fix},</span></span></span></span></span></div>
<div style="text-align: center;"><span style="font-family:trebuchet ms"><span style="font-family:trebuchet ms"><span style="color:#FFFFFF"><span style="font-family:trebuchet ms"> </span></span></span></span></div>
<div style="text-align: center;"><span style="font-family:trebuchet ms"><span style="font-family:trebuchet ms"><span style="color:#FFFFFF"><span style="font-family:trebuchet ms"><span style="font-family:trebuchet ms">The Horizon Energy Curriculum is a tool to empower educators and motivate students.<br />
With resources such as in-depth lesson plans, teachers guides, and an online textbook,<br />
Horizon provides a powerful set of resources to support science educators. </span></span></span></span></span></div>
<div style="text-align: center;"><span style="font-family:trebuchet ms"><span style="font-family:trebuchet ms"><span style="color:#FFFFFF"><span style="font-family:trebuchet ms"><span style="font-family:trebuchet ms"></span></span></span><strong><span style="font-family:trebuchet ms"><span style="font-family:trebuchet ms"><a class="validating" href="https://www.horizoncurriculum.com/#sample" style="text-decoration:none;"><span style="color:#FFFFFF; text-decoration:none">Click here to get a FREE lesson plan sample</span></a></span></span></strong><span style="color:#FFFFFF"><span style="font-family:trebuchet ms"><span style="font-family:trebuchet ms">.</span></span></span></span></span></div>
<div style="text-align: center;"><span style="font-family:trebuchet ms"><span style="font-family:trebuchet ms"> </span></span></div>
<div style="text-align: center;"><span style="color:rgb(255, 255, 255); font-family:trebuchet ms">✔ Energy science online book</span></div>
<div style="text-align: center;"><span style="font-family:trebuchet ms"><span style="font-family:trebuchet ms"><span style="color:#FFFFFF"><span style="font-family:trebuchet ms"><span style="font-family:trebuchet ms">✔ Complete STEM lesson plans</span></span></span></span></span></div>
<div style="text-align: center;"><span style="font-family:trebuchet ms"><span style="font-family:trebuchet ms"><span style="color:#FFFFFF"><span style="font-family:trebuchet ms"><span style="font-family:trebuchet ms">✔ Forum</span></span></span></span></span></div>
<div><span style="font-family:trebuchet ms"><span style="font-family:trebuchet ms"> </span></span></div>
<table align="center" bgcolor="#f79026" border="0" cellpadding="5" height="30" style="max-width: 600px; border-spacing: 0px; border-width: medium; border-style: none;" width="150">
<tbody>
<tr style="border-spacing: 0px;">
<td style="vertical-align: middle; text-align: center; border-spacing: 0px;"><a class="validating" href="https://www.horizoncurriculum.com/membership-account/membership-checkout/?level=1" style="text-decoration:none; color:#FFFFFF; text-align:center; font-family:trebuchet ms">REGISTER NOW</a></td>
</tr>
</tbody>
</table>
<span style="font-family:trebuchet ms"><span style="font-family:trebuchet ms"><span style="font-family:trebuchet ms"> </span></span></span></div>
</body>
</html>
在第一次修复后它有所帮助但不是我在顶部有一些额外的填充。
答案 0 :(得分：0)
奇怪的问题，它可能是别的，但一个简单的解决方法是将按钮包装在一个全宽度表中，并将绿色背景颜色添加到包装器。 在我的测试中添加包装器后工作正常
<table border="0" cellpadding="0" cellspacing="0" style="width:100%;">
<tr>
<td bgcolor="#18A355" align="center">
<table bgcolor="#f79026" border="0" cellpadding="5" height="30" style="max-width: 600px; border-spacing: 0px; border-width: medium; border-style: none;" width="150">
<tbody>
<tr style="border-spacing: 0px;">
<td style="vertical-align: middle; text-align: center; border-spacing: 0px;"><a class="validating" href="https://www.horizoncurriculum.com/membership-account/membership-checkout/?level=1" style="text-decoration:none; color:#FFFFFF; text-align:center; font-family:trebuchet ms">REGISTER NOW</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>