CSS列表间距段后

Question

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

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

此输出与段落的结束和列表像这样之间的一段差距：

我第

• 物品1
• ITEM2

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

内容是由用户生成的，有一组可用的标签，没有字体，尺寸...可用，所以如果可能，所有格式都应该在CSS中完成，而不必将类放入标签中。

编辑： 应该把我知道，因为这样利润率CSS倒塌的作品，我通常可以设置

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

的分离是在两种情况下是在保证金-top属性正确的p标签仍然是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; } 

因此，这里发生了什么是我设置了相关的利润为0，在p和UL，然后告诉任何兼容的浏览器寻找的p的p后是并添加上边距它。在p之后的一个ul（尽管这是一个小的余量）和ul（大的余量）之后的p相同。

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

Answer 2

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

p + ul { margin-top: 0; } 

有设置p下边距这种方式没有体面的方式，但如果需要的话，你可以在ul使用阴性切缘。

Answer 3

除了IE6/7之外，其他的答案都很好，正如他们所说的。但是，只要您将p的顶部边距设置为当前边距的两个值中的较大值，即使您将p底部边距设置为0，也不会影响段落之间的边距。只要您没有问题将012页顶部边距设置为0，那么您的边距就不会受到影响。因此，让我们说你有这个当前定义：

p {margin: 10px} 

将其设置为这样：

p {margin: 10px 10px 0} 

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

如果什么类型的用户在特定的包装div，您可以指定（通过id或class）结束了，那么你可以只设置这些样式p和ul只内包装适用，如果这是一个问题。

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; }