电子邮件HTML边框在内容上，而不是单元格上？

无论我在何处添加边框样式，它总是包装整个单元格，而不是单元格内容本身

下面是代码的用法：

如果我将其添加到span元素上，它将完全打破边界，如下所示：

以下是我所需要的：

---

我做错了什么？

将边框放在

h3

上，使其成为

内联块

td{
背景：灰色；
文本对齐：居中；
}
h3{
边框：1px纯白；
显示：内联块；
}

---

您的问题有很多解决方案： 一种是在单元格内容周围添加一个div，如下所示：

表{背景：黑色}
.等高线{
边框：2个实心#ccc；
宽度：50%；
身高：20%；
保证金：10px自动
}

---

不要设置表格样式、内容样式和简化标记：

<table border="0" cellpadding="0" cellspacing="0" width="100%">
  <tr>
    <td style="border:2px solid #ffffff; padding: 8px 10px;  border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px;  text-decoration:none;">
    <h3 style="color:#FFFFFF;font-family:Arial, Helvetica, sans-serif;font-size:16px;font-style:normal;font-weight:bold;line-height:150%;letter-spacing:2px;text-decoration:none;text-align:center;">
      <a alias="" conversion="false" data-linkto="https://" href="google.com" style="color:#ffffff;text-decoration:none; " title="Book Appointment">
        <span>BOOK AN APPOINTMENT<br> 
          TO VISIT US TOMORROW</span></a>
    </h3>
    </td>
  </tr>
</table>

---

这相当简单，在所有电子邮件客户端上都能始终如一地工作

单行文本：

    <td>
        <a alias="" conversion="false" data-linkto="https://" href="google.com"
 style="display:inline-block;border:2px solid #ffffff; padding: 8px 10px;color:#FFFFFF;font-family:Arial, Helvetica, sans-serif;font-size:16px;font-style:normal;font-weight:bold;line-height:150%;letter-spacing:2px;text-decoration:none;text-align:center;" title="Book Appointment">
    BOOK AN APPOINTMENT<br> 
    TO VISIT US TOMORROW</a>
    </td>

<table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="" style="margin: auto;">
  <tr>
    <td style="text-align: center;">
      <h3 style="margin: 0;"><a href="#" style="border: 2px solid #ffffff; font-family: sans-serif; font-weight: bold; font-size: 16px; line-height: 22px; text-decoration: none; padding: 20px 30px; color: #ff0000; display: block; letter-spacing: 2px;">Book An Appointment<br />To Visit Us Tomorrow</a></h3>
    </td>
  </tr>
</table>

两行文本：

    <td>
        <a alias="" conversion="false" data-linkto="https://" href="google.com"
 style="display:inline-block;border:2px solid #ffffff; padding: 8px 10px;color:#FFFFFF;font-family:Arial, Helvetica, sans-serif;font-size:16px;font-style:normal;font-weight:bold;line-height:150%;letter-spacing:2px;text-decoration:none;text-align:center;" title="Book Appointment">
    BOOK AN APPOINTMENT<br> 
    TO VISIT US TOMORROW</a>
    </td>

<table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="" style="margin: auto;">
  <tr>
    <td style="text-align: center;">
      <h3 style="margin: 0;"><a href="#" style="border: 2px solid #ffffff; font-family: sans-serif; font-weight: bold; font-size: 16px; line-height: 22px; text-decoration: none; padding: 20px 30px; color: #ff0000; display: block; letter-spacing: 2px;">Book An Appointment<br />To Visit Us Tomorrow</a></h3>
    </td>
  </tr>
</table>

除非屏幕阅读器需要

，否则我建议将其删除

---

祝你好运。

无法在JSFIDLE或其他代码片段上运行代码，请检查DIV在所有电子邮件客户端上是否都正常工作（outlook忽略DIV中的

显示块和
内联块）。
a
元素可能工作正常。感谢您的帮助！它似乎确实起了作用，但似乎只有Outlook为它们划分了边界。“我看看我是否能自己解决这个问题。”我向你道歉。我忘了Outlook会对带有两行文本的href执行此操作。所以我修改了我的答案，并在石蕊中进行了测试。这两行文字使Outlook更接近您想要的外观。