Corregir espaciado en Ocultar detalles

Contribuir UX
1

He notificado un comportamiento extraño en los espaciados al usar “Ocultar detalles”.

screenshot details
screenshot details2872×1100 472 KB

Cuando el contenido dentro de los detalles es simplemente texto, hay un buen espaciado entre el menú desplegable “Ocultar detalles” y el contenido, y luego entre el contenido y la siguiente sección de “Ocultar detalles”. Esto no ocurre cuando el contenido es una lista.

En Meta

Cuando el contenido es texto

¡Mira el espacio en blanco útil entre este contenido y “Cuando el contenido es texto”, así como entre este contenido y “Cuando el contenido es una lista no ordenada” a continuación!

Cuando el contenido es una lista no ordenada
  • Boo… ahora no hay espacio
  • entre este contenido y “Cuando el contenido es una lista no ordenada”
  • y entre este contenido y “Cuando el contenido es una lista ordenada”
Cuando el contenido es una lista ordenada
  1. Ahora hay espacio entre este contenido y “Cuando el contenido es una lista ordenada” de arriba
  2. ¡Y también hay espacio abajo!
Solo contenido de relleno

Vea el título anterior.

3 Me gusta
2

Esto debería solucionarlo:

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

Esto realmente no tiene nada que ver con «ocultar detalles» — es una consecuencia de que las listas terminen el área de contenido en lugar de los párrafos. La solución más sencilla es añadir un párrafo al final o un comentario HTML.