Skip to content

Markdown loose lists have incorrect bottom margin

Brett Walker requested to merge 31164-markdown-loose-lists-look-wrong into master

What does this MR do and why?

Markdown lists can either be "tight" (such as the most basic of lists), or "loose" (such as one with a paragraph embedded in the list item). A tight list should not have any additional spacing between items. A loose list gets additional padding between items to separate paragraphs, etc.

This MR fixes some spacing inconsistencies.

The orginal MR removed the bottom margin from all lists. This fixed the problem where tight lists were displayed incorrectly. But then loose lists were broken (had no bottom margin on lists).

A loose list can be distinguished from a tight list because the list item starts with a paragraph rather than a simple text node.

  • tight list: <li>this is a tight list item</li>
  • loose list: <li><p>this is a loose list item</p></li>

So this MR targets lists in a loose list by using a general sibling selector, such as p ~ ul - any ul that is preceded by a p with the same parent.

In this way, we're able to add back the bottom margin to lists inside a loose list.

Screenshots or screen recordings

Type Rendered Today After Fix Before Fix
tight
  1. Config step 1
    1. another
    2. and another
  2. Config step 2
  3. Config step 3
 Screen_Shot_2021-12-23_at_9.44.37_AM Screen_Shot_2021-12-23_at_9.43.52_AM
loose

  1. Config step 1

    Then do this

    1. another
    2. and another

  2. Config step 2

  3. Config step 3

 Screen_Shot_2021-12-23_at_9.46.59_AM Screen_Shot_2021-12-23_at_9.47.27_AM
loose
  1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    1. another

    2. and another

      This makes it into a loose list

      • one more list
  2. Config step 2
  3. Config step 3
 Screen_Shot_2021-12-23_at_10.02.22_AM Screen_Shot_2021-12-23_at_10.02.58_AM

How to set up and validate locally

Insert the various markdown snippets in the table above and check how they render.

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Related to #31164 (closed)

Edited by Brett Walker

Merge request reports