删除电子邮件中跨度和段落之间的 space

Question

我正在尝试为电子邮件编写代码，这就是我使用表格和内联样式的原因。

我想删除 span 和 p 之间的 space。我不知道为什么它会出现在那里。

<tr>
   <td>
      <span valign="top" bgcolor="#fff" class="content" style="  font-family: 'Lato',Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight:700; font-size: 19px; line-height:35px; color: #654308;> Header Goes Here </span>
      <p font-family: 'Lato',Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight:200; font-size: 16px; color: #654308;>Lorem ipsum dolor sit amet consectetur incididunt ut labore et dolore magna aliqua elit sed do eiusmod. </p>
   </td>
</tr>

Answer 1

当您将跨度设置为 header 并且上面的代码中有一些拼写错误时，您不使用 header 很奇怪。

您需要从段落

中删除默认值margin-top

td>p { margin-top: 0 }

Answer 2

删除 span 和 p 之间的 space 将 p 中的 margin 重置为 0 (p{margin:0}) , 因为默认情况下它有一些 margin 。（如果你用它来构建一个 html-email 然后应用它 inline

注意

你有 2 个错误：

您的 span 中缺少 "：#654308;> Header
您在 font-family

p

style

p {
  margin: 0
}

<table>
  <tr>
    <td>
      <span valign="top" bgcolor="#fff" class="content" style="  font-family: 'Lato',Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight:700; font-size: 19px; line-height:35px; color: #654308;"> Header Goes Here </span>
      <p style="font-family: 'Lato',Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight:200; font-size: 16px; line-height:22px; color: #654308;">Lorem ipsum dolor sit amet consectetur incididunt ut labore et dolore magna aliqua elit sed do eiusmod.</p>
    </td>
  </tr>
</table>

关于支持：Outlook.com 将是唯一不支持 margin 的，查看 this 了解更多信息

Answer 3

您可以为跨度和 p 添加 0 边距。看看这里：

<tr>
   <td>
      <span bgcolor="#fff" class="content" style= "font-family: Lato, Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; 
  font-weight:700;
  font-size: 19px;
  line-height:35px;
  color: #654308;
  margin-bottom: 0;"> Header Goes Here </span>
      <p style="  font-family: Lato,Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight:200; font-size: 16px; line-height:22px; color: #654308; margin-top: 0;">Lorem ipsum dolor sit amet consectetur incididunt ut labore et dolore magna aliqua elit sed do eiusmod. </p>
   </td>
</tr>

margin-bottom: 0 在你的 span 和 margin-top: 0 在你的 p 将删除 space.

在此处查看 fiddle：https://jsfiddle.net/john_h/0d2tv8wp/1/

此外，由于您在 html 电子邮件中使用 table 元素，请确保使用正确的内联样式格式。 http://www.w3schools.com/css/css_howto.asp

Answer 4

在某些浏览器中，默认情况下

元素周围有边距。您可以尝试将 "margin: 0" 添加到您的

样式中。

但是，请注意不同的电子邮件客户端在默认样式和他们关注 CSS 的哪些部分方面可能会有很大差异（Outlook.com 将忽略边距，除非 'm' 在'margin' 的开头大写：https://www.emailonacid.com/blog/article/email-development/outlook.com-does-support-margins)。我建议在像 Litmus 这样的服务中测试您的电子邮件，它可以让您了解它在各种客户端上的外观。

此外，这里有一个方便的列表，列出了各种电子邮件客户端支持的 CSS 功能：https://www.campaignmonitor.com/css/。

Answer 5

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
<table>
 <tr>
   <td>
      <span valign="top" bgcolor="#fff" class="content" style="  font-family: 'Lato',Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight:700; font-size: 19px; line-height:35px; color: #654308;"> Header Goes Here </span>
      <p style="margin:0px; font-family: 'Lato',Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight:200; font-size: 16px; color: #654308;">Lorem ipsum dolor sit amet consectetur incididunt ut labore et dolore magna aliqua elit sed do eiusmod. </p>
   </td>
</tr>
</table>
</body>
</html>

Answer 6

如果一切都失败了，将 <p> 和 <span> 标记替换为 <table> 标记：

<tr>
   <td  valign="top" bgcolor="#fff" class="content" style="font-family: Lato, Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight:700; font-size: 19px; line-height:35px; color: #654308;> Header Goes Here </td>
</tr>
<tr>
    <td style="font-family: Lato, Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight:200; font-size: 16px; color: #654308;"">
        Lorem ipsum dolor sit amet consectetur incididunt ut labore et dolore magna aliqua elit sed do eiusmod.
   </td>
</tr>

混淆 margin 和 display 属性将在许多电子邮件客户端（可能是您的目标）中工作，但如果您想要使用 <table> 标签会更安全最佳兼容性，不关心 <p> 和 <span> 标签的语义。

删除电子邮件中跨度和段落之间的 space

Removing space between span and paragraph in email

html

css

html-email