Css 删除 h 标签中的空 space

Question

有什么方法可以删除 h 标签顶部的空 space 吗？

h1 {
  border: 1px solid;
  margin: 0;
  padding: 0;
  line-height: normal;
}

<h1>Test Title yg</h1>

Answer 1

您可以使用 line-height: calc(1em + 2px); 删除一些 space，但 space 可用是有原因的。在 "g" 和 "y" 的底部有一些 space 到边界。使用 line-height: calc(1em + 2px);，您可以删除此 space，但不能删除 "T" 上方的 space。可以有像 ÄÖÜ（德语）这样的字符需要上面的 space 和像 gyq 这样的字符需要下面的 space。

h1 {
  border: 1px solid;
  margin: 0;
  padding: 0;
  line-height: calc(1em + 2px);
}

<h1>Test Title yg</h1>

Answer 2

顶部和底部 space 它实际上来自 font-family，但您可以通过将 line-height: normal; 更改为 line-height: 1.4rem; 来删除顶部 space。我希望它对你有用。谢谢

h1 {
  border: 1px solid;
  margin: 0;
  padding: 0;
  line-height: 1.4rem;
}
<h1>Test Title yg</h1>

Answer 3

文字上方的space取决于您使用的字体类型和字体大小。使用大字体时，必然会在文本的顶部和底部显示一些额外的 space。您可以将 h1 标签的 margin-top 设置为 -10px 或其他内容以针对此问题进行调整。

Answer 4

您应该寻找：

h1 {
  border: 1px solid;
  margin: 0;
  padding: 0;
  line-height: 1.4rem;
  padding-bottom: 8px;
}

<h1>Test Title yg</h1>

希望这就是您要找的！
但是 space 需要 HTML 个特殊字符。
请查看 HTML 个字符 here

Css 删除 h 标签中的空 space

Css remove empty space in h tags

html

css

html-head