line break inside a list item generates space between the lines
You can alter the line-height
property in your css. Does that help ?
This is a simple solution...
by adding a <br/><br/>
in your <li>
will add a blank line break directly underneath
<ul>
<li>Line 1<br/><br/></li>
<li>Line 2</li>
<li>Line 3</li>
<li>Line 4<br/><br/></li>
<li>Line 5</li>
</ul>
As a side note for Wordpress,
and <br />
will be automatically removed if present before the closing </li>
.
In a hacky way, you can use a zero-width non-joiner (‌
) or an invisible separator (⁣
).
In text mode, do a carriage return and insert a ‌
before the closing </li>
.
Example:
<ul>
<li>List item with a blank line below
‌</li>
<li>List item</li>
</ul>
For future people who end up on this question like me:
adding white-space: pre-wrap;
to the <ul>
worked for me! It also works with \n
as an added bonus :)
ul {
white-space: pre-wrap;
}