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

Strange <ul> spacing in different email clients

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

电子邮件在 Gmail 和 Mail (Mac) 中看起来不错,但在 Outlook 中间距真的很奇怪。我最初使用了 break 并且 space 非常宽。然后我使用了一个 <p> 标签,它在 Gmail 和 Mail 中看起来很棒,但在 Outlook 中两个列表之间没有任何 space。

这是使用的代码:

<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 间距问题有什么建议吗?

你可以使用 margin: top right bottom left 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>