Question

我想在电子邮件正文中将保证金的上边距和下边距应用于<hr>标记，但它没有被重新定义到Outlook电子邮件。以下是我想申请的代码：

<hr style='margin-bottom:-15px;margin-top:-15cm;color:#333;'/>

请帮我解决一下。

Answer 1

根据this article，Outlook不再支持margins。作为替代方案，您可以将hr元素包装在与所需margin-top + margin-bottom一样高的包装中，然后将hr元素偏移margin-top从顶部。

在下面的示例中，我将10px用作margin-top，将20px用作margin-bottom，因为我不知道15px + {{1} }等于=）

＆＃13;

15cm

＆＃13;

.hr-wrapper {
  position: relative;
  /* the height should be your margin-top + margin-bottom, e.g. 10px + 20px */
  height: 30px; 
}

hr {
  position: absolute;
  /* that's where your margin-top goes. The rest of the wrapper's height
  will contribute to margin-bottom */
  top: 10px;
  margin: 0; /* this is just for the browser where margin works */
  width: 100%;
}

/* These divs are just for show */
div:not(.hr-wrapper){
  background-color: goldenrod;
  height: 30px;
}

＆＃13;

Answer 2

HTML电子邮件非常令人讨厌。如果您希望在大多数电子邮件客户端中正确呈现电子邮件，则无法依赖现代CSS的大量功能。

以下是避免：

的一小部分内容

position
float
margin
display

很多更多。

基本上，use nested tables用于您的布局。它们是唯一能够为您提供跨电子邮件客户端一致呈现的内容。

Dreamweaver是一个非常好的工具，可帮助您编写嵌套表结构，而无需手动编写HTML。我不知道是否有免费的类似产品。

如果您定位移动设备 - and you should be - 您可以使用媒体查询。在这些查询中，您可能可以使用一些更新的CSS功能，但在谨慎方面是错误的。

margin-top：-15px（负像素）在html中无法在Outlook中运行

2 个答案: