# 修复隐藏详情中的间距

**URL:** https://meta.discourse.org/t/fix-spacing-in-hide-details/180277
**Category:** UX
**Tags:** hide-details
**Created:** [2021 年2 月 19 日 00:20 UTC](https://meta.discourse.org/t/fix-spacing-in-hide-details/180277 "2021-02-19T00:20:59Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### 作者： ![debryc](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/debryc/32/101652_2.png) [@debryc](https://meta.discourse.org/u/debryc)
#### 发布日期： [2021 年2 月 19 日 00:20 UTC](https://meta.discourse.org/t/fix-spacing-in-hide-details/180277/1 "2021-02-19T00:20:59Z")

</div>

我注意到使用“隐藏详情”时会出现奇怪的间距问题。

 ![screenshot details](https://global.discourse-cdn.com/meta/original/3X/e/9/e9da0a2420a322451899d90e33bdbffb7315ae33.png)

当详情中的内容仅为文本时，“隐藏详情”下拉菜单与内容之间、以及内容与下一个“隐藏详情”部分之间都有良好的间距。但如果内容是列表，这种情况就不成立了。

在 Meta 上

> **当内容为文本时**
>
> 看看这段内容与“当内容为文本时”之间的留白，以及这段内容与下方“当内容为无序列表时”之间的留白！

> **当内容为无序列表时**
>
> - 唉……现在这段内容与“当内容为无序列表时”之间没有间距了
> - 这段内容与下方“当内容为有序列表时”之间也没有间距了

> **当内容为有序列表时**
>
> 1. 现在这段内容与上方的“当内容为有序列表时”之间有间距了
> 2. 下方也有间距！

> **仅作填充内容**
>
> 请参见上方的标题。

---

<div class="post-metadata">

### 作者： ![cosdesign](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cosdesign/32/208585_2.png) [@cosdesign](https://meta.discourse.org/u/cosdesign)
#### 发布日期： [2021 年2 月 19 日 02:03 UTC](https://meta.discourse.org/t/fix-spacing-in-hide-details/180277/2 "2021-02-19T02:03:45Z")

</div>

这应该能解决问题：

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

```

---

<div class="post-metadata">

### 作者： ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### 发布日期： [2021 年2 月 21 日 02:16 UTC](https://meta.discourse.org/t/fix-spacing-in-hide-details/180277/3 "2021-02-21T02:16:32Z")

</div>

这与“隐藏详情”并无直接关联，而是因为列表会结束内容区域，而非段落。最简单的变通方法是在底部添加一个段落或 HTML 注释。