html 代码在 Outlook 电子邮件中的输出与在浏览器中的输出不同答案

【问题标题】：html code doesn't give the same output in outlook email as in browserhtml 代码在 Outlook 电子邮件中的输出与在浏览器中的输出不同
【发布时间】：2020-06-26 00:55:52
【问题描述】：

我有一个小的 html 代码，它在通过浏览器运行时给出了预期的输出，但是当我在 Outlook 电子邮件中使用它时却没有。

<html>
<head>
  <style>
      </style>
</head>
<body>
  <table border=1 cellspacing=0 cellpadding=0><tr>
    <td style="padding-left:50;"></td>  
    <td style="display:block;text-align: left;vertical-align: top;height:150; width:500;margin:0">
    <a href=https://www.mytitlelink>
    <p style="font-size:12px;font-family:Graphik;color:blue;text-decoration: underline;
    font-weight:bold;vertical-align:top;margin:0">This is my title here</p></a>
    <p style="font-size:12px;font-family:Graphik;color:black;margin:0">
Here goes my text. Figuring a way to remove leading blank link above title and reduce the spacing between title and this text. Tried using line-spacing, margin, padding but no luck. Everything works fine when access this html text through browser but troubling me when the same is used with inthe outlook email. 
Here goes my text
Here goes my text ...<a href=https://www.mytitlelink> read more</a></p>
    <p style=" font-size:12px;font-family:Graphik;color:black;">Source:MySource<br>Published On:Date</p>
    </td>
</tr></table>
</body>
</html>

使用 Outlook 电子邮件时，无法摆脱标题顶部的前导空白行以及标题和文本之间的行距。

附上屏幕截图 Output from Outlook Email Output from browser

浏览了不同的链接并理解电子邮件中的 html 代码的行为与浏览器不同，但没有找到解决方案。

【问题讨论】：

标签： html css outlook

【解决方案1】：

您好，刚刚发现它的<p> 标签导致了问题。在这里找到Outlook adding space in HTML email。谢谢。

【讨论】：

【解决方案2】：

当使用 HTML 发送电子邮件时，您将其发送到的服务（无论是 gmail、outlook 等）将过滤您的 html，然后使用他们自己的一组“规则”重新制作它。为了给您一个好的答案，我们需要哪些部分搞砸了，以及您使用的 Outlook 版本是什么。我建议你看看this，因为它有助于调试与电子邮件客户端的 css 不一致。

【讨论】：

您好，感谢您的回复，我附上了一张屏幕截图，显示了我的预期以及前景中的问题。我使用的 Outlook 版本是 Office365 ProPlus。感谢您的链接。