Corrigir Espaçamento em Ocultar Detalhes

[debryc (Deborah Chang)]

Notei um comportamento estranho de espaçamento ao usar ‘Ocultar Detalhes’.

Quando o conteúdo dentro de detalhes é apenas texto, há um bom espaçamento entre o menu suspenso ‘Ocultar Detalhes’ e o conteúdo, e também entre o conteúdo e a próxima seção ‘Ocultar Detalhes’. Isso não se mantém quando o conteúdo é uma lista.

No Meta

Quando o conteúdo é texto

Observe o espaço em branco útil entre este conteúdo e “Quando o conteúdo é texto”, bem como entre este conteúdo e “Quando o conteúdo é uma lista não ordenada” abaixo!

Quando o conteúdo é uma lista não ordenada

• Boo… agora não há espaço
• entre este conteúdo e “Quando o conteúdo é uma lista não ordenada”
• e entre este conteúdo e “Quando o conteúdo é uma lista ordenada”

Quando o conteúdo é uma lista ordenada

1. Agora há espaço entre este conteúdo e “Quando o conteúdo é uma lista ordenada” acima
2. E espaço abaixo também!

Apenas conteúdo de preenchimento

Veja o título acima.

[cosdesign (Cos)]

Isso deve corrigir:

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

[codinghorror (Jeff Atwood)]

Isso não tem realmente nada a ver com “ocultar detalhes” — é uma consequência de as listas terminarem a área de conteúdo, em vez dos parágrafos. A solução mais fácil é adicionar um parágrafo no final ou um comentário HTML.