Question

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

我想删除span和p之间的空格。我不知道为什么它首先出现在那里。

<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

<!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 2

要删除span中p和margin重置p之间的空格0 p{margin:0}（margin），因为它有一些" {1}}默认情况下。（如果您使用它来构建html-email，则将其应用于内联

注意

你有2个错误：

您span #654308;> Header style

错过了p

您在font-family

之前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>属性

＆＃13;
＆＃13;
margin
＆＃13;
{{1}}
＆＃13;
＆＃13;
＆＃13;

关于支持：Outlook.com将是唯一不支持{{1}}的人，请查看this以获取更多信息

Answer 3

如果您将某个范围设置为标题并且上面的代码中有一些拼写错误，那么您不使用标题很奇怪。

您需要从段落

中删除默认的margin-top

td>p { margin-top: 0 }

Answer 4

您可以为范围和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，margin-top：p上的0将删除空格。

在这里看一个小提琴：https://jsfiddle.net/john_h/0d2tv8wp/1/

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

Answer 5

在某些浏览器中，＆lt; p＆gt;默认情况下，元素周围有边距。您可以尝试将“margin：0”添加到＆lt; p＆gt;的样式中。

但是，请注意不同的电子邮件客户端在默认样式和他们注意的CSS部分中可能会有很大差异（Outlook.com将忽略边距，除非'margin'开头的'm'大写：{{ 3}}）。我建议您在Litmus这样的服务中测试您的电子邮件，它可以让您了解它在各种客户端的外观。

此外，这是一个方便的列表，其中列出了各种电子邮件客户端支持的CSS功能：https://www.emailonacid.com/blog/article/email-development/outlook.com-does-support-margins。

Answer 6

If all else fails, replace the <p> and <span> tags with <table> markup:

<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>

Messing with the margin and display properties will work in many email clients (and maybe the ones your targeting), but using <table> tags is much safer if you want the best compatibility and don't care about the semantics of <p> and <span> tags.

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

6 个答案: