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

Question

33

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

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

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

- user544079

你想只用CSS来实现这个吗？还是可以改变标记语言？ - Joseph Marikle

8个回答

12

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

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

- polypiel

8

这种简单的方式对我很有效：

这个简单的方法对我很有效：

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

- rosecoutre

4

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

如果这不是你想要的，请提供更具体的信息。

- locrizak

4

我使用以下方法，在我的HTML邮件列表中获得了不错的效果：

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

这不会重置所有边距值，仅会重置那些在有序列表之前创建了这样的间隔的边距值，并且仍然不会假设任何默认边距值。

- Crulex

2

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

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

或者（B）更改CSS

p{margin:0px;}

- Joseph Marikle

2

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

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

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

* { margin: 0; padding: 0; }

- Stuiterbal

2

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

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

- Michael Berry

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Joe Hansen · Accepted Answer

您可以使用CSS选择器来实现类似以下方式的功能：

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

这可能很有帮助，因为p + ul意味着选择在<p>元素后的任何<ul>元素。您需要根据通常在<p>标签上设置的填充或边距进行调整。

原始问题的原始答案：

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

这将消除任何额外的空白。

p, ul {
    display: inline;
}

那样会使所有元素都变成行内元素而不是块级元素。(例如，<p> 标签不会在其前后引起换行。)