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, &nbsp; and <br /> will be automatically removed if present before the closing </li>.

In a hacky way, you can use a zero-width non-joiner (&zwnj;) or an invisible separator (&#8291;).

In text mode, do a carriage return and insert a &zwnj; before the closing </li>.

Example:

<ul>
  <li>List item with a blank line below
  &zwnj;</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;
}

Tags:

Html

Css