删除 标签 HTML 上方和下方的空格答案

【问题标题】：Remove space above and below tag HTML删除 标签 HTML 上方和下方的空格
【发布时间】：2011-07-29 14:07:57
【问题描述】：

以ul 为例：

<ul>
    <li>HI THERE</li>
    <br>
    <li>
        <p>ME</p>
    </li>
</ul>

当li 标记的innerHtml 为空白时，li 将自己包裹到文本。

p 标签不会发生这种情况。我假设这是因为p 用于通常在前后有空格符的段落。

有什么办法可以去掉？

【问题讨论】：

顺便问一下，  是怎么回事？
您是在问如何从源代码视图中删除空格，或者如何从浏览器的视觉输出中删除填充和空格？

标签： html css

【解决方案1】：

 元素一般有margins and / or padding。您可以在样式表中将它们设置为零。

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

然而，从语义上讲，有一个段落列表是相当不寻常的。

【讨论】：

我只使用 P，所以我可以给它一个 id。你会推荐什么。我避免使用 div，因为我已经有太多了。
Li 和 Ul 似乎也有默认的边距和填充。太感谢了。这为我节省了很多麻烦！
这取决于你为什么要给它一个 id。你可以给<li> 一个id。
或者您可以使用  而不是  来添加该 ID :)
@S.Goswami — 然后有别的东西在干扰。在其他条件相同的情况下，这将起作用。

【解决方案2】：

看这里：http://www.w3schools.com/tags/tag_p.asp

p元素前后自动创建一些空格本身。空间由浏览器自动应用，或者您可以在样式表中指定它。

您可以使用 css 删除多余的空间

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

或者使用元素，它没有默认边距并且是一个内联元素。

【讨论】：

请不要误将dreadful W3Schools 的工作归于 W3C。
对不起！编辑了我的帖子;-)

【解决方案3】：

有两种方式：

最好的方法是完全删除。它在增加空间时按规范操作。

或者，使用 CSS 设置  的样式。比如：

ul li p {
    padding: 0;
    margin: 0;
    display: inline;
}

【讨论】：

【解决方案4】：

如果有人希望使用引导程序执行此操作，版本 4 提供以下功能：

类以 xs 的 {property}{sides}-{size} 格式命名和 {property}{sides}-{breakpoint}-{size} 用于 sm、md、lg 和 xl。

其中属性是以下之一：

m - for classes that set margin
p - for classes that set padding

其中边是以下之一：

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

其中大小是以下之一：

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

例如：

.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;
}

参考：https://getbootstrap.com/docs/4.0/utilities/spacing/

【讨论】：

【解决方案5】：

CSS 重置是解决此问题的最佳方法。现在在重置中，我们使用 p 并且在需要的基础上，您可以添加任意数量的标签。

p {
    margin:0;
    padding:0;
}

【讨论】：

【解决方案6】：

 标签具有内边距和边距。当您的 为空时，您可以创建一个结合一些javascript 的CSS 选择器。可能有点矫枉过正，但它应该做你需要做的事情。

CSS 示例：.NoPaddingOrMargin {padding: 0px; margin:0px}

【讨论】：

没有 CSS 类这样的东西。如果你想使用 CSS 类 selector 来选择一个带有 HTML 类的元素，那么它需要以 . 开头，并且应该有一个描述 what 的名称元素代表而不是它的外观。

【解决方案7】：

我不明白你为什么要把element 放在那里。但是另一种删除段落之间空格的方法是只声明一个段落

<ul>
   <p><li>HI THERE</li>
    <br>
    <li>ME</li>
     </p>
   </ul>

【讨论】：

这是无效的 HTML，当浏览器尝试解析它时会被严重破坏。

【解决方案8】：

不确定这是否适合您，只需将  替换为 <div>

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。