How to code bullet points in email correctly

🌍 By Litmus Community

Coding an email with bullet points can lead to unexpected results.

Regular HTML bullet list will not work without a little finesse. Use this guide to make them work across all email platforms. This has been tested tried and true.

After experimenting in Litmus and have found a working solution for lists that works across all mail clients. Read on below.

Put this inside your <head> to tweak Outlook 07-13:

<!--[if gte mso 9]>
<style>
li {
    text-indent: -1em; /* Normalise space between bullets and text */
}
</style>
<![endif]-->

Simple list:

<ul style="padding: 0; Margin: 0;">
    <li style="Margin: 0;">This list</li>
    <li style="Margin: 0;">Will look the same</li>
    <li style="Margin: 0;">Across all mail clients</li>
</ul>

Note the capital M in Margin. This is the only way to set margins in Outlook.com. Font styles will be inherited from the parent element so you don’t have to define them on every tag.

Using Margin you have limited control over indents and spacing:

<ul style="padding: 0; Margin: 0 0 0 40px;"> <!-- left and right margins only -->
    <li style="Margin: 10px 0 10px 0;">This list</li> <!-- top and bottom margins only -->
    <li style="Margin: 0 0 10px 0">Will look the same</li>
    <li style="Margin: 0 0 10px 0">Across all mail clients</li>
</ul>

We can try nesting lists:

<ul style="padding: 0; Margin: 0;">
    <li style="Margin: 0;">This list</li>
    <li style="Margin: 0;">
        Will look the same
        <ul style="padding: 0; Margin: 0 0 0 20px;">
            <li style="Margin: 10px 0 10px 0;">Nested lists</li>
            <li style="Margin: 0 0 10px 0">Will also look the same</li>
        </ul>
    </li>
    <li style="Margin: 0;">
        Across all mail clients
    </li>
</ul>

The only real discrepancy I can see between mail clients is the size and shape of the the list bullet. This doesn’t bother me personally. You can safely use list-style-type to customise the bullet shape. In mail clients that support it you can also use psuedo elements for styling lists.


Don’t miss out. Get your FREE weekly newsletter every Thursday!

* indicates required
Recent Posts

Facebook Cover Page Template Download

Get the updated 2018 Facebook group and pages PhotoShop (PSD) template.

Twitter Cover Page Template Download

Get the updated 2018 Twitter Cover Photo PhotoShop (PSD) template.