删除大写标题周围的空间答案

【问题标题】：Remove space around uppercase header删除大写标题周围的空间
【发布时间】：2016-11-17 13:57:01
【问题描述】：

我有一个以大写字母显示的标题。我希望这个标题和下面的框框之间只有 2 个像素。

如果文本中包含像“g”这样的小写字母，则下方没有空格，但是一旦所有“g”、“y”和“j”字母都消失了，它就会出现。

是否有任何跨浏览器的方法来摆脱该空间？显然浏览器显示不同数量的空白空间：https://jsfiddle.net/5o94va6p/13/，所以像 line-height: 0.7 这样的技巧在 Firefox 中有效，但在 Safari 中占用了太多空间。

【问题讨论】：

【解决方案1】：

Safari 和 chrome 在空白方面看起来很相似。看起来不同的浏览器是 Firefox。我只会使用 CSS 为其指定行高。这样火狐浏览器会很好看，不会影响其他浏览器的外观。

试试这个只针对 Firefox 的代码：

@-moz-document url-prefix() {
    h1 {
       line-height: 0.7
    }
}

【讨论】：

如果 Firefox 以一种方式呈现它而所有其他浏览器以另一种方式呈现它，那将起作用。恐怕每个浏览器都在做自己的计算，会有一些差异。
@Michal 在我在 Mac 上的测试中，Chrome 和 Safari 在空白方面看起来完全一样。唯一呈现不同空间的浏览器是 Firefox。至于 Internet Explorer，我没有测试过，坦率地说，我认为没有人再使用它了。
唉，Chrome/Windows 比 Safari/macOS 提供更多空间，所以它似乎也可能依赖于操作系统。
@Michal 是的，这是可能的。

【解决方案2】：

y、g、p 等字母所需的基线下方的空间始终存在，它是行高的一部分 - 这就是你的问题的原因。除非您定义负边距底部值，否则您无法更改它，例如

.my_heading {
  margin-bottom: -4px;
}

【讨论】：

是的，我明白了。问题是 Firefox 和其他浏览器的空间不同 - 请参阅我的示例。添加固定的负边距并不能解决这个问题，FF的空间仍然很大，Safari的空间很小。
是否使用完全相同的字体？您可以尝试添加以像素为单位的行高定义。浏览器之间的默认行高可能不同。
这就是问题所在，同一种字体在不同的浏览器中需要不同的间距。
但是如果你以像素为单位定义行高呢？
如果我没记错的话，如果你有 font-size: 36px，那么 line-height: 1.0 和 line-height: 36px 应该是一样的。

【解决方案3】：

尝试使用这个 -

.box{
  margin-top: 2px;
  position: fixed;
}

【讨论】：