세부 정보 숨기기 간격 수정

상세 정보 숨기기(Hide Details)를 사용할 때 이상한 간격 문제를 발견했습니다.

상세 정보의 내용이 단순히 텍스트인 경우, ‘상세 정보 숨기기’ 드롭다운과 콘텐츠 사이, 그리고 콘텐츠와 다음 ‘상세 정보 숨기기’ 섹션 사이에 적절한 여백이 확보됩니다. 그러나 콘텐츠가 목록인 경우 이러한 규칙이 적용되지 않습니다.

메타(Meta)에서 확인 결과

콘텐츠가 텍스트일 때

이 콘텐츠와 “콘텐츠가 텍스트일 때” 사이, 그리고 이 콘텐츠와 아래에 있는 “콘텐츠가 비정렬 목록일 때” 사이의 유용한 여백을 확인해 보세요!

콘텐츠가 비정렬 목록일 때
  • 부… 이제 여백이 없습니다
  • 이 콘텐츠와 “콘텐츠가 비정렬 목록일 때” 사이
  • 그리고 이 콘텐츠와 “콘텐츠가 정렬 목록일 때” 사이에도
콘텐츠가 정렬 목록일 때
  1. 이제 이 콘텐츠와 위쪽의 “콘텐츠가 정렬 목록일 때” 사이에 여백이 있습니다
  2. 아래에도 여백이 있습니다!
단순히 채워 넣은 콘텐츠

위 제목을 참조하세요.

3개의 좋아요

이렇게 하면 해결될 거예요:

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

이것은 실제로 “세부 정보 숨기기”와는 큰 관련이 없습니다. 목록이 콘텐츠 영역을 종료시키기 때문에 발생하는 결과입니다. 가장 쉬운 해결 방법은 하단에 단락을 추가하거나 HTML 주석을 넣는 것입니다.