CKEditor not allowing space after nesting of list in a content, when opened in MicroSoft Outlook

Question

Hi all I am using CKEditor (react) to edit and create content to be mailed via send grid. The content is for an example is like this:

<ul><li><strong>Netflix plans to raise prices of ad-free tier following Actor’s Strike </strong> (link) outlook view here

            <strong>Details on timing and increase are still limited:</strong> It is still not known how much Netflix will raise prices by or when exactly the new prices will take effect, but the WSJ report says "a few months" after the strike ends
        </li>

        <li>
            <strong>Discussing raising prices in several markets globally, </strong>but will likely begin with the US and Canada
        </li>

        <li>
            <strong>Could represent the first price increase this year:</strong> Netflix last raised its prices in January 2022; The monthly cost for its basic plan for US customers rose $1 to $9.99, while its standard plan incr’d to $15.49 from $13.99 and the premium plan to $19.99 from $17.99
        </li>

        <li>
            <strong>WGA noted that cost of their new contract will amount to 0.2% of Netflix’s annual revenue</strong> (<a href="https://www.thewrap.com/wga-strike-contract-studio-costs/">link</a>)<strong>:</strong> Under the new WGA contract, Netflix would pay up an additional $6mn, or 0.2% of its $31.6bn annual revenue; It remains to be seen how negotiations will shape up with the Screen Actor’s Guild and the impact it will have on the streamers’ financials&nbsp;
            <br>
            &nbsp;
        </li>

    </ul>
</li>
<li>

Here when the li elements are nested the space after the inner li elements is removed when the content is opened in Microsoft outlook. If we open the mail in gmail it looks fine.

How can I introduce the space in nesting of lists?
I tried putting inline css Style like <li style ="margin-top : 10px;"></li>

I also tried putting <br> tags in place of &nbsp;

I also tried putting customised style in the sendgrid mail template like this

<style>ul li ul li:last-child {margin-bottom: 10px;}</style>

none of the above solutions are working as expected.

Answer 1

Outlook is a bit weird in how it applies spacing on lists. On a single level (so, not nested), the margin-top of the first <li> governs the spacing above the list, and the margin-bottom of the last <li> governs the spacing below the list. I.e. not the margin on the <ul> or <ol>.

For nested lists, in my tests just now, it's the same. I tested this and it worked:

<ul>
    <li>And things here
        <ul>
            <li>one</li>
            <li>two</li>
            <li style="margin-bottom:50px;">three</li>
        </ul>
    </li>
    <li>And another story here
        <ul>
            <li>second list</li>
            <li>second two</li>
            <li>second three</li>
        </ul>
    </li>
</ul>

Alternatively, as Outlook doesn't accept fancy CSS like :last-child (https://www.caniemail.com/features/css-pseudo-class-last-child/), you could try adding a class to the last list item and add margin-bottom to it?

But for getting it consistent across email clients, you may find it easier to have a blank paragraph--you just have to do it slightly different:

<p style="font-size:0;line-height:0;margin:50px 0 0 0;">&nbsp;</p>

Sometimes, it's the editor itself that is removing what it considers blank space. In that case, still the above should work, or, you can try to use some fancy characters such as ‌ (zero-width non-joiner), which normally don't get removed.