How to get blank lines in WordPress lists?

with No Comments

I have wanted to add some blank lines in my document between list items (either ordered or not).

For example I want…

  1. Text1
  2. Test2
  3. Test3


<li>Text1</li>
<li>Test2</li>
<li>Test3</li>

To look like:

  1. Text1
  2. Test2
  3. Test3

 

First Attempt ( Failed! )

I tried adding a new line and even a &nbsp; but neither worked, like this…


<li>Text1
&nbsp;</li>
<li>Test2
&nbsp;</li>
<li>Test3
&nbsp;</li>

Or


<li>Text1<br />
&nbsp;</li>
<li>Test2<br />
&nbsp;</li>
<li>Test3<br />
&nbsp;
</li>

But when you switch from Visual to HTML mode and back again it deletes it and returns to the same as before.

 

Solution One  ( Best! )

<li style=”margin-bottom:1em”>

Like this:


<li style="margin-bottom:1em">Text 1</li>
<li style="margin-bottom:1em">Test 2</li>
<li style="margin-bottom:1em">Test 3</li>

  1. Text 1
  2. Test 2
  3. Test 3

 

Solution Two (Good)

<p style="margin-bottom:1em">

Like this:


<li><p style="margin-bottom:1em">text1</p></li>
<li><p style="margin-bottom:1em">text2</p></li>
<li><p style="margin-bottom:1em">text3</p></li>

  1. text1

  2. text2

  3. text3

Solution Three  ( Also Good! )

Change the p tag to an h tag

<h2 style="margin-bottom:1em">

Like this:


<li><h2 style="margin-bottom:1em">text1</h2></li>
<li><h2 style="margin-bottom:1em">text2</h2></li>
<li><h2 style="margin-bottom:1em">text3</h2></li>

  1. text1

  2. text2

  3. text3

Leave a Reply