Posted by Toolforger on Jan 04, 2020; 8:36pm
URL: https://discuss.asciidoctor.org/Why-is-there-a-p-inside-an-li-tp7472.html

I am using Asciidoctor to generate unordered lists (<ul>).

What's the rationale behind

* link:../../index.html[Website]
** link:../../blog/index.html[Blog]
*** link:../../blog/2013/index.html[2013]
**** link:../../blog/2013/2013-01.html[First Post]
**** link:../../blog/2013/2013-02.html[Second Post (from attribute)]
*** link:../../blog/2019/index.html[Year 2019 (from attribute)]
**** link:../../blog/2019/2019-01.html[Third Post (from attribute)]
**** link:../../blog/2019/2019-02.html[Fourth Post (from attribute)]
**** link:../../blog/2019/2019-03.html[Fifth Post (from attribute)]
*** link:../../blog/2020/index.html[Year 2020 (from attribute)]
**** link:../../blog/2020/2020-01.html[Sixth Post (from attribute)]
**** Seventh Post (from attribute)

generating HTML like the following?

<div class="ulist">
  <ul>
    <li>
      <p><a href="../../index.html">Website</a></p>
      <div class="ulist">
        <ul>
          <li>
            <p><a href="../../blog/index.html">Blog</a></p>
            <div class="ulist">
              <ul>
                <li>
                  <p><a href="../../blog/2013/index.html">2013</a></p>
                    <div class="ulist">
                      <ul>
                        <li>
                          <p><a href="../../blog/2013/2013-01.html">First Post</a></p>
                        </li>
                        <li>
                          <p><a href="../../blog/2013/2013-02.html">Second Post (from attribute)</a></p>
                        </li>
                      </ul>
                    </div>
                  </li>
                  <li>
                    <p><a href="../../blog/2019/index.html">Year 2019 (from attribute)</a></p>
                    <div class="ulist">
                      <ul>
                        <li>
                          <p><a href="../../blog/2019/2019-01.html">Third Post (from attribute)</a></p>
                        </li>
                        <li>
                          <p><a href="../../blog/2019/2019-02.html">Fourth Post (from attribute)</a></p>
                        </li>
                        <li>
                          <p><a href="../../blog/2019/2019-03.html">Fifth Post (from attribute)</a></p>
                        </li>
                      </ul>
                    </div>
                  </li>
                  <li>
                    <p><a href="../../blog/2020/index.html">Year 2020 (from attribute)</a></p>
                    <div class="ulist">
                    <ul>
                      <li>
                        <p><a href="../../blog/2020/2020-01.html">Sixth Post (from attribute)</a></p>
                      </li>
                      <li>
                        <p>Seventh Post (from attribute)</p>
                      </li>
                    </ul>
                  </div>
                </li>
              </ul>
            </div>
          </li>
        </ul>
      </div>
    </li>
  </ul>
</div>

Sorry for giving full example with everything, I wasn't sure whether removing something would change the behaviour or not.

Issue is that the <p> in <li><p>...</p></li> is generating too much vertical space between list items.
I know I can restyle the thing with the proper selectors, but I'd like to know what's happening first, so my CSS won't break with the next Asciidoctor update.