Take a look at this fiddle to see my issue.

To give an overview, I’m using a columns property to break this <ol> and the children <li>s to create a two-column display. I’m also adding some bottom margin on the list-items to add some spacing between the elements.

In the “three section preview”, if you inspect the ordered list, the bottom of the butts right up to the bottom of the paragraph (as it should).

screenshot showing no extra space between the bottom of list item and beginning of the margin, as intended

However, if the columns are equal in height, there’s some hidden spacing at the bottom of the ordered list as seen here:

screenshot showing additional padding at the bottom of the ordered list

This isn’t any margin or padding on the list items or paragraphs. You can see I’m setting the paragraph margin to 0.

Now it seems to be caused by an issue between using columns and margin-bottom. If you remove the margin-bottom on the <li> that mysterious gap disappears. But the margin-bottom shouldn’t be causing any spacing between on the <ol> parent. To prove this, that’s why I have the first “three section preview”. Those list-items also have a margin-bottom but, as illustrated in the first screenshot above, there’s no mysterious padding.

What could be causing this additional spacing? Any thoughts are appreciated.

What I’ve tried:

My goal here is to figure out what’s causing the mysterious spacing between the list-items and ordered-list. I’ve narrowed it down to the margin-bottom on the list-items but that shouldn’t be impacting the spacing, as illustrated. I’ve tried using a margin-top instead of a margin-bottom but I still have the mysterious space if there are two list-items within the ordered-list.