Excessive vertical space between ordered list items

In a post of my blog there’s an ordered list with excessive vertical space between two consecutive items, the second of which has a code block. Here’s what the list looks like in the post:

ordered-list

Notice the vertical space between items 4. and 5. The relevant Markdown code is:

I went through the upgrade process Mr. Smith outlined and it worked, sort of. Here are the steps I took:

1. enable the flag `chrome://flags#crostini-bullseye-upgrade`
2. reboot Chrome OS
3. accept the prompt to upgrade to Bullseye
4. open the Terminal app
5. run the following shell commands:
    
    ```bash
    $ sudo apt update
    $ sudo apt full-upgrade -y
    $ sudo apt -y autoremove
    ```

How can I fix this formatting issue?

Yeah, that’s strange. What happens when you remove the inline code? Seems like the margin might come from a different Html entity.

Removing the code block fixes the vertical spacing:

ordered-list-fixed

I thought this was on writefreely. I copied the code over and the formatting problem doesn’t happen in writefreely, so I assume this is form write.as?

Yes, the blog I posted to is hosted at Write.as.

@help Any insight?

I also noticed that on my Write.as blog as well. It seems it’s double spacing after numbered lists. Is there any way to change this?

@help Could this be a bug?

@help @matt I’d appreciate your feedback on this issue.

It might be a bug. I couldn’t see anything in CSS that was causing the extra white space. The only way I was able to take out the space was to use inline css for that specific list item.

If I’m not mistaken, you can have a post that is a combination of markdown and HTML. So, I think your best option right now is to use plain HTML for just the list in your post. By doing that, you can set specific CSS settings for the list items.

1 Like

@support Any feedback?

Sorry for the delay, @PaoloAmoroso. It looks like our Markdown parser doesn’t support block elements inside a list item very well. Looking at the HTML, the extra space is showing up because #5 is getting turned into a <p>, and a newline is getting generated before the <li>.

I can try to take a look at a fix soon, but another solution for now might be to un-indent the code block, so it’s not included with that list item.

1 Like

I know this will happen if there’s an extra line in between list items… Is that the case on this post?

No, there are no extra lines in between. When I edit the post, the spaces between lines actually appear close to normal, but after publishing it shows with the excessive spaces.