删除段落和无序列表之间的空格

Question

<p>Text</p>
<ul>
  <li>One</li>
</ul>
 <p>Text 2</p>

如何删除段落和列表之间的垂直空间.

更具体一点 - 如果后面跟着一个无序列表,我该如何减少p标签的底部边距/填充.我在这里看到的所有答案都删除了所有p标签后的空格 - 这不是所要求的.

Answer 1

您可以使用类似于以下方式的CSS选择器:

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

这可能很有用,因为p + ul意味着选择<ul>元素后面的任何<p>元素.

您必须根据<p>标签上的填充或边距进行调整.

对原始问题的原始答案:

p, ul {
    padding: 0;
    margin: 0;
}

这将占用任何额外的白色空间.

p, ul {
    display: inline;
}

这将使所有元素内联而不是块.(例如,<p>在它之前和之后不会导致换行.)

Answer 2

一种方法是使用立即选择器和负边距.此规则将在段落后面选择一个列表,因此它只是设置负边距.

p + ul {  
   margin-top: -XX;
}

Answer 3

这种简单的方法对我来说很好用：

<ul style="margin-top:-30px;">