html - 段落后的 CSS 列表间距

Question

如果我有用户生成的内容，例如:

<p>my paragraph</p>
<ul>
  <li>item1</li>
  <li>item2</li>
</ul>

这段输出在段落末尾和列表之间有一个段落间隙，如下所示:

我的段落:

• 第 1 项
• 元素2

我知道我可以通过在 UL 标签上设置 margin-top 和在 p 上设置 margin-bottom 来消除 CSS 中的空白。标记，但有没有办法在不影响实际段落之间的边距的情况下做到这一点？

内容是用户生成的，只有一组有限的可用标签，没有可用的字体、大小...因此所有格式设置都应在 CSS 中完成，如果可能的话，不必在标签中放置类。

我知道，由于边距折叠在 CSS 中的工作方式，我通常可以设置

p { margin-bottom:0; }
li { margin-top:0; }

在这两种情况下分隔都是正确的，因为 p 标签上的 margin-top 属性仍为 1，但我已经将 margin-top 设置为 0.2em h2 和 p 标签之间的间隙更小。

Answer 1

这是兄弟选择器的完美用例。但是，它在 IE6 中不起作用或 IE7 .

p { margin: 0; }
ul { margin-top: 0; margin-bottom: 0; }
p + p { margin-top: 15px; }
p + ul { margin-top: 3px; }
ul + p { margin-top: 3px; }

因此，我将 p 和 ul 上的相关边距设置为 0，然后告诉所有兼容的浏览器寻找 p 在 p 之后并为其添加上边距。对于 p 之后的 ul 也是如此(尽管这是一个很小的余量)，以及 ul 之后的 p (又是大利润)。

同样，这在 IE6 和 7 中不起作用，因此您可能希望使用条件注释在这些浏览器上获得体面的(如果不是完美的)外观。