Question

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

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

这会在段落末尾和列表之间输出段落间隙，如下所示：

我的段落

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

Answer 2

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

p + ul { margin-top: 0; }

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

Answer 3

除了IE6 / 7之外，其他答案也很有效，正如他们所说的那样。但是，如果将p底部边距设置为0，只要将p的上边距设置为边距为的两个值中的较大值，则意识到不会影响段落之间的边距。目前。只要您在将ul上边距设置为0时没有问题，那么您的p边距不会受到影响。所以，假设你现在定义了这个：

p {margin: 10px}

将其设置为：

p {margin: 10px 10px 0}

不会影响您 p标签之间的保证金（这似乎是您关心的问题），因为10px底部边距与顶部折叠仅为了弥补差距10px。如果您的下边距当前设置为大于上边距，则需要将上边距更改为更大的值，以查看相同的间距。现在，如果你想在最后p上有一些底部边距，那么你将不得不适应它。

如果用户输入的内容最终会出现在您可以定位的特定包装div中（通过id或class），那么您可以为{{1}设置这些样式}和p仅在该包装中应用，如果这是一个问题。

Answer 4

这取决于你的其余代码，但你可以这样做：

p{ margin-bottom:0; }

您可能认为这会影响其余所有段落，但由于CSS的“边距折叠”功能，它实际上不应该 - 只要您处于标准模式且使用有效的DOCTYPE。

如果您需要更多解释 - 或者它不起作用，请告诉我。

Answer 5

如果你有像贝娄这样的建筑：

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

和CSS一样：

p { margin: 0 0 25px 0; }

它可能导致P和LIST之间的差距。

我使用负边距解决了这个问题：

p + ul { margin-top: -20px; }