不同电子邮件客户端中的奇怪 <ul> 间距答案

【问题标题】：Strange <ul> spacing in different email clients不同电子邮件客户端中的奇怪 <ul> 间距
【发布时间】：2015-01-29 23:00:25
【问题描述】：

我正在使用 MailChimp 处理 HTML 电子邮件。在电子邮件中，我有两个单独的无组织列表，它们之间有一个中断。

电子邮件在 Gmail 和 Mail (Mac) 中看起来不错，但在 Outlook 中的间距确实很不稳定。我最初使用了一个休息时间，空间非常宽敞。然后我使用了<p> 标签，它在 Gmail 和 Mail 中看起来很棒，但在 Outlook 中，两个列表之间没有任何空格。

这是使用的代码：

<ul style="line-height: 20.8000011444092px;">
<li><span style="font-size:16px"><span style="font-family:arial,helvetica neue,helvetica,sans-serif">How many times you&rsquo;ve checked your blood glucose in a day and how many strips you have left. What&rsquo;s really cool is when you only have 10 days of supplies remaining,&nbsp;we&rsquo;ll prompt you to approve a reorder through the XXXXX<sup>&reg;</sup></span></span><span style="font-size:16px"><span style="font-family:arial,helvetica neue,helvetica,sans-serif">&nbsp;blood glucose meter. All you have to do is say &ldquo;YES&rdquo; and we&rsquo;ll ship more supplies right to your home!</span></span></li>
<li><span style="font-size:16px"><span style="font-family:arial,helvetica neue,helvetica,sans-serif">How many steps you&rsquo;ve taken if you&rsquo;re using the pedometer function&nbsp;on XXXXX<sup>&reg;</sup>.</span></span></li>

放在这里看起来很正常，但在 Outlook 中，间距是 2 英寸。有关如何解决我的 UL 间距问题的任何建议？

【问题讨论】：

标签： html email outlook

【解决方案1】：

你可以使用边距：右上左下http://jsfiddle.net/bzpk57py/3/

<ul style="line-height: 20.8000011444092px;">
<li style="margin:0 0 20px 0;"><span style="font-size:16px"><span style="font-family:arial,helvetica neue,helvetica,sans-serif">How many times you&rsquo;ve checked your blood glucose in a day and how many strips you have left. What&rsquo;s really cool is when you only have 10 days of supplies remaining,&nbsp;we&rsquo;ll prompt you to approve a reorder through the XXXXX<sup>&reg;</sup></span></span><span style="font-size:16px"><span style="font-family:arial,helvetica neue,helvetica,sans-serif">&nbsp;blood glucose meter. All you have to do is say &ldquo;YES&rdquo; and we&rsquo;ll ship more supplies right to your home!</span></span></li>
<li><span style="font-size:16px"><span style="font-family:arial,helvetica neue,helvetica,sans-serif">How many steps you&rsquo;ve taken if you&rsquo;re using the pedometer function&nbsp;on XXXXX<sup>&reg;</sup>.</span></span></li>

你也可以使用 % 代替 px

<ul style="line-height: 120%">
<li style="margin:0 0 4% 0"><span style="font-size:1em"><span style="font-family:arial,helvetica neue,helvetica,sans-serif">How many times you&rsquo;ve checked your blood glucose in a day and how many strips you have left. What&rsquo;s really cool is when you only have 10 days of supplies remaining,&nbsp;we&rsquo;ll prompt you to approve a reorder through the XXXXX<sup>&reg;</sup></span></span><span style="font-size:1em"><span style="font-family:arial,helvetica neue,helvetica,sans-serif">&nbsp;blood glucose meter. All you have to do is say &ldquo;YES&rdquo; and we&rsquo;ll ship more supplies right to your home!</span></span></li>
<li><span style="font-size:1em;"><span style="font-family:arial,helvetica neue,helvetica,sans-serif">How many steps you&rsquo;ve taken if you&rsquo;re using the pedometer function&nbsp;on XXXXX<sup>&reg;</sup>.</span></span></li>

【讨论】：

谢谢。我最终使用了两个文本块，因此 Outlook 不会将两者合并到一个无组织的列表中，而是调整了每个块的边距。像魅力一样工作！