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

【问题标题】：remove space between paragraph and unordered list删除段落和无序列表之间的空格
【发布时间】：2016-05-17 07:03:57
【问题描述】：

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

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

更具体地说 - 我如何减少 p 标签的底部边距/填充，仅当后面跟着一个无序列表时。我在这里看到的所有答案都删除了所有 p 标签后的空格 - 这不是被问到的。

【问题讨论】：

标签： html css

【解决方案1】：

您可以通过类似于以下方式使用 CSS 选择器：

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

这可能会有所帮助，因为p + ul 表示选择<p> 元素之后的任何<ul> 元素。

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

原始问题的原始答案：

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

这将带走任何额外的空白。

p, ul {
    display: inline;
}

这将使所有元素内联而不是块。（因此，例如，<p> 不会在其前后造成换行符。）

【讨论】：

【解决方案2】：

一种方法是使用立即选择器和负边距。这个规则会在段落之后选择一个列表，所以它只是设置了一个负边距。

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

如果这不是您要查找的内容，则必须更具体

【讨论】：

【解决方案5】：

您可以 (A) 将标记更改为不使用段落

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

或者（B）改变css

p{margin:0px;}

【讨论】：

【解决方案6】：

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

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

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

* { margin: 0; padding: 0; }

【讨论】：

【解决方案7】：

通过使用以下内容，我的 HTML 邮件列表得到了很好的结果：

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

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

【讨论】：

【解决方案8】：

我最终使用了一个定义列表，其中包含一个无序列表。它解决了列表上方不需要的空间问题，无需更改每个段落标签。

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

【讨论】：