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

Answer 4

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

如果那不是你想要的，你必须更具体

Answer 5

您可以（A）将标记更改为不使用段落

<span>Text</span>
<br>
<ul>
  <li>One</li>
</ul>
<span>Text 2</span>

或（B）改变css

p{margin:0px;}

Answer 6

每个浏览器都有一些默认样式，适用于许多HTML元素，如p和ul。您提到的空间可能是由于浏览器的默认边距和填充而创建的。您可以重置这些：

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

您还可以重置所有默认边距和填充：

* { margin: 0; padding: 0; }

Answer 7

通过使用以下内容，我的HTML邮件列表获得了相当不错的结果：

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

这不会重置所有边距值，只会重置那些在排序列表之前创建这种间隙的边距值，并且仍然不会假设任何有关默认边距值的内容。

Answer 8

我最终使用了一个定义列表，里面有一个无序列表。它解决了列表上方不需要的空间问题，而无需更改每个段落标记。

<dl><dt>Text</dt>
<dd><ul><li>First item</li>
<li>Second item</li></ul></dd></dl>