段落后的 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 标签之间的差距。

原文由 PeteT 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 中不起作用，因此您可能希望使用条件注释在这些浏览器上获得体面的（如果不是完美的）外观。

原文由 Ryan Kinal 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

如果要定位 ul 元素，请使用相邻的兄弟选择器。

 p + ul { margin-top: 0; }

没有任何像样的方法来设置 p 底部边距，但如果需要，您可以在 ul 上使用负边距。

原文由 derekerdmann 发布，翻译遵循 CC BY-SA 4.0 许可协议