Fix Spacing in Hide Details

ux
1

I’ve noticed an odd spacing behavior when using Hide Details.

screenshot details
screenshot details2872×1100 472 KB

When the content in the details is simply text, there’s nice spacing between the Hide Details dropdown and the content, then between the content and the next Hide Details section. This does not hold true when the content is a list.

On Meta

When content is text

Look at the helpful white space between this content and “When content is text” as well as this content and the “When content is an unordered list” below!

When content is an unordered list
  • Boo… now there’s no space
  • between this content and “When content is an unordered list”
  • and between this content and “When content is an ordered list”
When content is an ordered list
  1. Now there is space between this content and “When content is an ordered list” above
  2. And space below, too!
Just filler content

See title above.

3 Likes
2

This should fix it:

   .cooked details[open]>ul {
        margin: 1em 0;
    }
3

This doesn’t really have anything to do with “hide details” — it is a consequence of lists ending the content area, instead of paragraphs. The easiest workaround is to add a paragraph at the bottom, or a HTML comment.