Исправить отступы в «Скрыть детали»

Внести вклад UX
1

Я заметил странное поведение отступов при использовании функции «Скрыть детали».

screenshot details
screenshot details2872×1100 472 KB

Когда содержимое блока «детали» представляет собой просто текст, между выпадающим списком «Скрыть детали» и контентом, а также между контентом и следующим блоком «Скрыть детали», есть приятный отступ. Однако это не работает, когда содержимое представляет собой список.

На Мета

Когда содержимое — текст

Обратите внимание на полезный пробел между этим содержимым и заголовком «Когда содержимое — текст», а также между этим содержимым и заголовком «Когда содержимое — маркированный список» ниже!

Когда содержимое — маркированный список
  • Буу… теперь нет пробела
  • между этим содержимым и заголовком «Когда содержимое — маркированный список»
  • и между этим содержимым и заголовком «Когда содержимое — нумерованный список»
Когда содержимое — нумерованный список
  1. Теперь есть пробел между этим содержимым и заголовком «Когда содержимое — нумерованный список» выше
  2. И пробел снизу тоже!
Просто заполнитель

Смотрите заголовок выше.

3 лайка
2

Это должно исправить проблему:

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

Это не имеет прямого отношения к функции «скрыть детали» — это следствие того, что списки завершают область контента вместо абзацев. Самый простой способ обойти это — добавить абзац в конце или HTML-комментарий.