删除标题标签下的填充答案

【问题标题】：Remove padding beneath heading tag删除标题标签下的填充
【发布时间】：2022-04-28 18:46:37
【问题描述】：

目前我有一个列表，上面有一个 H3 标题（我不能轻易删除，它是由 cms 自动生成的），看起来像这样

Headline
|
|
List stuff

我想摆脱管道。它们似乎是“内置”到<h3> 标签中的，有人知道 h3 的什么 CSS 属性会摆脱这个吗？

【问题讨论】：

标签： html css

【解决方案1】：

H1、H2 和 H3 标签都固有地由浏览器添加了边距和填充。

您可以通过在 css 中的 H1、H2 和 H3 标签上放置背景并在不同的浏览器中查看来进行测试。

要删除“管道间距”，您应该：

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

然后您可以重新添加任何您想要的内容，因为 CSS 是一种单向执行路径。后续的 CSS 值将覆盖基本级别的 CSS。

【讨论】：

【解决方案2】：

另一个去除文本下方空格的选项如下：

h3 
{ 
    display:inline; 
}

【讨论】：

【解决方案3】：

尝试将H3上的“border”样式属性设置为

border:0;

有可能“管道”实际上是标题上的一个边框，一个右边框属性，您可以修改或覆盖它。

替代方案：CMS 生成的真正管道（我假设您已经检查了 HTML 源代码，但事实并非如此，但很好问）

您能否选择文本并查看它是真正的竖线字符，还是只是一个视觉元素？

其他选择：某种 CSS 内容属性。更罕见，因为大多数浏览器不支持它。

【讨论】：

【解决方案4】：

除了@Jonathan 的回答，您还必须添加：

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

这解决了我的问题。

【讨论】：

【解决方案5】：

如果管道是实际的文本，如果不使用某种形式的 JavaScript，您将无法摆脱它们。

如果管道是 H3 的背景图像，您可以使用它来删除它们：

h3
{
  background-image: none;
}

【讨论】：

【解决方案6】：

根据您的要求设置高度以及字体大小，如果高度小于字体大小，它将删除填充！

【讨论】：