Question

我有2段作为

<p style="color:#333333; line-height: 20px; font-size: 16px; font-family: Helvetica, Arial, sans-serif; font-weight:bold; margin:0; padding:0; text-align: left;">Title of para</p>

 <p style="color:#767676; line-height: 20px; font-size: 12px; font-family: Helvetica, Arial, sans-serif;  text-align: left; margin-bottom: 1cm;  margin-top:0; padding:0;">Text</p>

我希望在2段之间有0个空格，但同时在第1段的顶部和第2段的底部有一些固定的空格。

我正在创建一个html电子邮件，因此是内联样式。它在一些客户端工作正常。但在随从和gmail中，两段之间的空间并没有消失。：（

Answer 1

http://jsfiddle.net/jnuHD/

我添加了

height:12px;

到第一段。似乎工作。

Answer 2

我猜测Gmail中的某些内置样式会覆盖您设置的边距和填充。您是否尝试将!important标记添加到其值中并查看是否有帮助？

Answer 3

添加一些背景颜色表明问题出在不在它们之间的p标记内

http://jsfiddle.net/hs3A2/

您需要线高设计吗？如果不是，以下减少间距：

http://jsfiddle.net/UTZ8y/

您还可以使用行高来进一步缩小间距： http://jsfiddle.net/99zcM/1/

维持行高可以使用定位来调整“间距”：

<div style="position:relative;">
 <p style="line-height: 20px; font-size: 16px; 
     font-family: Helvetica, Arial, sans-serif; font-weight:bold; 
     margin:0; padding:0; text-align: left;">Title of para
 </p>

 <p style="color:#767676; line-height: 20px; font-size: 12px;
     font-family: Helvetica, Arial, sans-serif;  text-align: left; 
     margin-bottom: 1cm;  margin-top:0; padding:0;
     position:relative;top:-5px;">Text</p>
</div>

在此处查看：http://jsfiddle.net/Md9Na/

我不确定这对各种电子邮件客户端的效果如何，并注意重叠

html段落中的缩进问题

3 个答案: