Html 删除段落和无序列表之间的空格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7759229/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
remove space between paragraph and unordered list
提问by user544079
<p>Text</p>
<ul>
<li>One</li>
</ul>
<p>Text 2</p>
How do i remove the vertical space between paragraph and the list.
如何删除段落和列表之间的垂直空间。
To be more specific - how do I reduce the bottom margin/padding of the p tag ONLY when followed by an unordered list. All the answers I see here remove the space after all p tags - that's not what was asked.
更具体地说 - 如何仅在后跟无序列表时减少 p 标记的底部边距/填充。我在这里看到的所有答案都删除了所有 p 标签之后的空格——这不是被问到的。
回答by Joseph Hansen
You can use CSS selectors in a way similar to the following:
您可以通过类似于以下的方式使用 CSS 选择器：
p + ul {
margin-top: -10px;
}
This could be helpful because p + ulmeans select any <ul>element after a <p>element.
这可能会有所帮助，因为p + ul意味着<ul>在元素之后选择任何<p>元素。
You'll have to adapt this to how much padding or margin you have on your <p>tags generally.
<p>通常，您必须根据标签上的填充或边距来调整它。
Original answer to original question:
原始问题的原始答案：
p, ul {
padding: 0;
margin: 0;
}
That will take any EXTRA white space away.
这将带走任何额外的空白。
p, ul {
display: inline;
}
That will make all the elements inline instead of blocks. (So, for instance, the <p>won't cause a line break before and after it.)
这将使所有元素内联而不是块。（因此，例如，<p>不会导致前后换行。）
回答by polypiel
One way is using the immediate selector and negative margin. This rule will select a list right after a paragraph, so it's just setting a negative margin-top.
一种方法是使用立即选择器和负边距。此规则将在段落之后立即选择一个列表，因此它只是设置负边距顶部。
p + ul {
margin-top: -XX;
}
回答by rosecoutre
This simple way worked fine for me:
这种简单的方法对我来说很好用：
<ul style="margin-top:-30px;">
回答by locrizak
p, ul{
padding:0;
margin:0;
}
If that's not what your looking for you'll have to be more specific
如果这不是您要找的东西，则必须更具体
回答by Joseph Marikle
You can (A) change the markup to not use paragraphs
您可以 (A) 将标记更改为不使用段落
<span>Text</span>
<br>
<ul>
<li>One</li>
</ul>
<span>Text 2</span>
Or (B) change the css
或 (B) 更改 css
p{margin:0px;}
Demos here: http://jsfiddle.net/ZnpVu/1
演示在这里：http: //jsfiddle.net/ZnpVu/1
回答by Stuiterbal
Every browser has some default styles that apply to a number of HTML elements, likes p and ul. The space you mention is likely created because of the default margin and padding of your browser. You can reset these though:
每个浏览器都有一些适用于许多 HTML 元素的默认样式，例如 p 和 ul。您提到的空间可能是由于浏览器的默认边距和填充而创建的。您可以重置这些：
p { margin: 0; padding: 0; }
ul { margin: 0; padding: 0; }
You could also reset all default margins and paddings:
您还可以重置所有默认边距和填充：
* { margin: 0; padding: 0; }
I suggest you take a look at normalize.css: http://necolas.github.com/normalize.css/
我建议你看看 normalize.css：http: //necolas.github.com/normalize.css/
回答by Crulex
I got pretty good results with my HTML mailing list by using the following:
通过使用以下内容，我的 HTML 邮件列表获得了相当不错的结果：
p { margin-bottom: 0; }
ul { margin-top: 0; }
This does not reset all margin values but only those that create such a gap before ordered list, and still doesn't assume anything about default margin values.
这不会重置所有边距值，而只会重置那些在有序列表之前创建这种间隙的值，并且仍然不对默认边距值做任何假设。
回答by Michael Berry
I ended up using a definition list with an unordered list inside it. It solves the issue of the unwanted space above the list without needing to change every paragraph tag.
我最终使用了一个定义列表，其中包含一个无序列表。它解决了列表上方不需要的空间的问题，而无需更改每个段落标签。
<dl><dt>Text</dt>
<dd><ul><li>First item</li>
<li>Second item</li></ul></dd></dl>
