内联样式以更正 HTML 电子邮件中的嵌套链接

Question

我很难对嵌套在 table 中的两个链接进行内联样式设置。请注意，这 HTML 是一封即将发出的电子邮件，我被告知我必须使用内联样式来完成我的样式任务。这是代码：

<table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td style="font-family: Arial, sans-serif; font-size: 16px; line-height: 22px; border-collapse: collapse; border-radius: 1em; overflow: hidden; padding: 1.5em; background: #f6f6f6;" align="center"><p style="margin: 0; font-size: 16px; line-height:22px; mso-height-rule: exactly; color:  #000; font-weight:400;"><strong>Hello:</strong></p>
            <strong>Registration fee total: </strong><p>
            Invoice #: </p>
            <table border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td><a href="http://example.com" target="_blank" style="font-size: 16px; font-family: Arial, sans-serif; color: #ffffff; text-decoration: none; border-radius: 0px; background-color: #0b5584; border-top: 12px solid #0b5584; border-bottom: 12px solid #0b5584; border-right: 18px solid #0b5584; border-left: 18px solid #0b5584; display: inline-block; vertical-align: middle; font-weight: bold">Pay Online using Credit or Debit Card</a></td>
                    <td><a href="http://example.com" target="_blank" style="font-size: 16px; font-family: Arial, sans-serif; color: #ffffff; text-decoration: none; border-radius: 0px; background-color: #0b5584; border-top: 12px solid #0b5584; border-bottom: 12px solid #0b5584; border-right: 18px solid #0b5584; border-left: 18px solid #0b5584; display: inline-block; font-weight: bold;">Pay Cash at YouPayMeNow!&reg; Location</a></td>
                </tr>
            </table></td>
    </tr>
</table>

电子邮件的呈现方式如下（我已经在多种浏览器和设备上进行了试验，到处都是一样的）：

看看链接之间是如何拼凑在一起的，没有任何 padding/border？我需要它们间隔开，但仍居中于它们所在的灰色框内。我需要两个链接周围的蓝色框彼此大小相同，文本在各自的框内水平和垂直居中。 我怎样才能做到这一点？

Answer 1

您使用的 table 属性现已弃用 - 尽管它们在某些浏览器上仍然有效。

建议改用CSS。此代码段使用 border-spacing 在带有链接的两个单元格之间形成间隙。它还将背景颜色放在单元格本身上，而不是单元格中的锚元素。

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td style="font-family: Arial, sans-serif; font-size: 16px; line-height: 22px; border-collapse: collapse; border-radius: 1em; overflow: hidden; padding: 1.5em; background: #f6f6f6;" align="center">
      <p style="margin: 0; font-size: 16px; line-height:22px; mso-height-rule: exactly; color:  #000; font-weight:400;"><strong>Hello:</strong></p>
      <strong>Registration fee total: </strong>
      <p>
        Invoice #: </p>
      <table style="border-collapse: separate; border-spacing: 1em 0;">
        <tr>
          <td style=" background-color: #0b5584; padding: 10px; text-align: center;"><a href="http://example.com" target="_blank" style="font-size: 16px; font-family: Arial, sans-serif; color: #ffffff; text-decoration: none; border-radius: 0px; display: inline-block; vertical-align: middle; font-weight: bold">Pay Online using Credit or Debit Card</a></td>
          <td style=" background-color: #0b5584; padding: 10px; text-align: center;"><a href="http://example.com" target="_blank" style="font-size: 16px; font-family: Arial, sans-serif; color: #ffffff; text-decoration: none; border-radius: 0px display: inline-block;font-weight: bold;">Pay Cash at YouPayMeNow!&reg; Location</a></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

内联样式以更正 HTML 电子邮件中的嵌套链接

Inline styling to correct nested links in an HTML email

css

inline-styles