詳細を隠すのスペーシングを修正

貢献 UX
1

「詳細を隠す」を使用すると、奇妙な間隔の挙動が観察されます。

screenshot details
screenshot details2872×1100 472 KB

詳細内のコンテンツが単なるテキストの場合、「詳細を隠す」ドロップダウンとコンテンツの間、そしてコンテンツと次の「詳細を隠す」セクションの間に適切な間隔が空きます。しかし、コンテンツがリストの場合、この挙動は当てはまりません。

Meta 上で

コンテンツがテキストの場合

このコンテンツと「コンテンツがテキストの場合」、またこのコンテンツと下の「コンテンツが順序なしリストの場合」の間に、役立つ空白があるのをご覧ください！

コンテンツが順序なしリストの場合
  • Boo… これでこのコンテンツと「コンテンツが順序なしリストの場合」の間、そしてこのコンテンツと下の「コンテンツが順序付きリストの場合」の間に間隔がなくなりました
  • 間隔がなくなりました
  • 間隔がなくなりました
コンテンツが順序付きリストの場合
  1. これで、上の「コンテンツが順序付きリストの場合」とこのコンテンツの間に間隔があります
  2. 下にも間隔があります！
単なるダミーコンテンツ

上記のタイトルをご覧ください。

「いいね！」 3
2

これで修正されるはずです：

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

これは「詳細を隠す」とは直接関係ありません。コンテンツエリアが段落ではなくリストで終わることが原因です。最も簡単な回避策は、末尾に段落を追加するか、HTML コメントを入れることです。