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

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

Headline
|
|
List stuff

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

【问题讨论】:

  • 能发一下h3的相关出处吗?
  • 当前应用于<h3> 元素的样式是什么?

标签: 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】:

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

          【讨论】:

            猜你喜欢
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 2016-03-25
            • 1970-01-01
            • 1970-01-01
            相关资源
            最近更新 更多