删除 <p> 标记 HTML 上下的空格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6874402/
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 above and below <p> tag HTML
提问by OVERTONE
Take this ulfor example:
以这个ul为例：
<ul>
<li>HI THERE</li>
<br>
<li>
<p>ME</p>
</li>
</ul>When the innerHtml of an litag is blank, the liwraps itself right up to the text.
当li标签的innerHtml为空时，标签li将自己包装到文本。
It doesn't happen for the ptag. I'm assuming this is because pis for paragraphs which usually have white space breaks before and after.
p标签不会发生这种情况。我假设这是因为p用于通常在前后有空格符的段落。
Is there any way to remove this?
有什么办法可以去掉这个吗？
回答by Quentin
<p>elements generally have margins and / or padding. You can set those to zero in a stylesheet.
<p>元素通常有边距和/或填充。您可以在样式表中将它们设置为零。
li p {
margin: 0;
padding: 0;
}
Semantically speaking, however, it is fairly unusual to have a list of paragraphs.
然而，从语义上讲，有一个段落列表是相当不寻常的。
回答by Sarah West
Look here: http://www.w3schools.com/tags/tag_p.asp
看这里：http: //www.w3schools.com/tags/tag_p.asp
The p element automatically creates some space before and after itself. The space is automatically applied by the browser, or you can specify it in a style sheet.
p 元素会自动在其前后创建一些空间。该空间由浏览器自动应用，或者您可以在样式表中指定它。
you could remove the extra space by using css
您可以使用 css 删除多余的空间
p {
margin: 0px;
padding: 0px;
}
or use the element <span>which has no default margins and is an inline element.
或者使用<span>没有默认边距并且是内联元素的元素。
回答by user1477388
In case anyone wishes to do this with bootstrap, version 4 offers the following:
如果有人希望使用引导程序执行此操作，版本 4 提供以下内容：
The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl.
类使用格式 {property}{sides}-{size} 命名为 xs，{property}{sides}-{breakpoint}-{size} 用于 sm、md、lg 和 xl。
Where property is one of:
财产是以下之一：
m - for classes that set margin
p - for classes that set padding
Where sides is one of:
其中边是以下之一：
t - for classes that set margin-top or padding-top
b - for classes that set margin-bottom or padding-bottom
l - for classes that set margin-left or padding-left
r - for classes that set margin-right or padding-right
x - for classes that set both *-left and *-right
y - for classes that set both *-top and *-bottom
blank - for classes that set a margin or padding on all 4 sides of the element
Where size is one of:
其中 size 是以下之一：
0 - for classes that eliminate the margin or padding by setting it to 0
1 - (by default) for classes that set the margin or padding to $spacer * .25
2 - (by default) for classes that set the margin or padding to $spacer * .5
3 - (by default) for classes that set the margin or padding to $spacer
4 - (by default) for classes that set the margin or padding to $spacer * 1.5
5 - (by default) for classes that set the margin or padding to $spacer * 3
auto - for classes that set the margin to auto
For example:
例如：
.mt-0 {
margin-top: 0 !important;
}
.ml-1 {
margin-left: ($spacer * .25) !important;
}
.px-2 {
padding-left: ($spacer * .5) !important;
padding-right: ($spacer * .5) !important;
}
.p-3 {
padding: $spacer !important;
}
Reference: https://getbootstrap.com/docs/4.0/utilities/spacing/
回答by George Cummins
There are two ways:
有两种方式：
The best way is to remove the <p>altogether. It is acting according to specification when it adds space.
最好的办法是<p>完全删除。当它增加空间时，它是按规范操作的。
Alternately, use CSS to style the <p>. Something like:
或者，使用 CSS 设置<p>. 就像是：
ul li p {
padding: 0;
margin: 0;
display: inline;
}
回答by user6785809
CSS Reset is best way to use for this issue. Right now in reset we are using p and in need bases you can add any number of tags by come separated.
CSS 重置是解决此问题的最佳方法。现在在重置中，我们使用 p 并且在需要的基础上，您可以通过分隔来添加任意数量的标签。
p {
margin:0;
padding:0;
}
回答by Matt
<p>tags have built in padding and margin. You could create a CSS selector combined with some javascript for instances when your <p>is empty. Probably overkill, but it should do what you need it to do.
<p>标签内置了填充和边距。当您<p>为空时，您可以创建一个 CSS 选择器与一些 javascript 结合使用。可能矫枉过正，但它应该做你需要它做的事情。
CSS example: .NoPaddingOrMargin {padding: 0px; margin:0px}
CSS 示例： .NoPaddingOrMargin {padding: 0px; margin:0px}
