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

文本

• 一个

文本2

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

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

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

如果这不是你想要的，你必须更具体些，你可以（A）将标记改为不使用段落

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

---

此处演示：

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

p{margin:0px;}

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

这可能很有帮助，因为

p+ul

意味着在

元素之后选择任何

元素

通常，您必须根据

标记上的填充或边距调整此设置

原问题的原答覆：

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

这将带走任何额外的空白

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

---

这将使所有元素内联，而不是块。（例如，

不会导致前后换行。）

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

p, ul {
    display: inline;
}

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

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

---

我建议您看看normalize.css：

我最后使用了一个定义列表，其中有一个无序列表。它解决了列表上方多余空间的问题，而无需更改每个段落标记

* { margin: 0; padding: 0; }

文本
第一项
第二项

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

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

---

通过使用以下内容，我在HTML邮件列表中获得了非常好的结果：

p{margin:0px;}

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

---

这不会重置所有的边距值，但只重置那些在有序列表之前产生这种间隙的边距值，并且仍然不会假定任何默认边距值。

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

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

您是只想用css实现这一点，还是也可以更改标记？