删除内联块元素中大文本上方和下方的空白

Question

假设我有一个定义为内联块的 span 元素。它的唯一内容是纯文本。当字体非常大时，您可以清楚地看到浏览器如何在文本上方和下方添加一点填充。

HTML:

CSS：

 span {
  display: inline-block;
  font-size: 50px;
  background-color: green;
}

​

 <span>BIG TEXT</span>

查看盒模型，很明显浏览器 在内容边缘内 添加了填充。我需要删除这个“填充”，一种方法是简单地改变行高，如：

http://jsfiddle.net/7vNpJ/1/

这在 Chrome 中效果很好，但在 Firefox 中，文本正在向顶部移动（FF17、Chrome 23、Mac OSX）。

任何跨浏览器解决方案的想法？谢谢！

原文由 MusikAnimal 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

看起来好像您需要明确设置字体，并根据需要更改 line-height 和 height 。假设“Times New Roman”是您浏览器的默认字体：

 span {
  display: inline-block;
  font-size: 50px;
  background-color: green;
  /*new:*/
  font-family: 'Times New Roman';
  line-height: 34px;
  height: 35px;
}

 <span>
    BIG TEXT
</span>

原文由 karacas 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

浏览器没有添加任何填充。相反，字母（即使是大写字母）在垂直方向上通常比字体高度小得多，更不用说行高了，默认情况下通常约为字体高度（字体大小）的 1.2 倍。

由于字体不同，因此没有通用的解决方案。即使对于固定的字体大小，字母的高度也会因字体而异。并且大写字母在字体中不需要具有相同的高度。

可以通过实验找到实用的解决方案，但它们不可避免地依赖于字体。您需要将行高设置为基本上小于字体大小。对于 Arial 字体，以下内容似乎在 Windows 上的不同浏览器中产生了预期的结果：

 span.foo
{
  display: inline-block;
  font-size: 50px;
  background-color: green;
  line-height: 0.75em;
  font-family: Arial;
}

span.bar
{
  position: relative;
  bottom: -0.02em;
}

 <span class=foo><span class=bar>BIG TEXT</span></span>

嵌套的 span 元素用于垂直置换文本。否则，文本位于基线之上，并且在基线之下，为下部保留了空间（如字母 j 和 y）。

如果你仔细观察（缩放），你会注意到这里大多数字母的上方和下方都有非常小的空间。我已经设置好让字母“G”适合。它比其他大写字母垂直延伸得更远一点，因为这样字母 看起来 高度相似。其他字母也存在类似问题，例如“O”。如果您需要字母“Q”，则需要调整设置，因为它有一个延伸到基线以下（Arial）的下降部分。当然，如果您需要“É”或几乎任何变音符号，您就有麻烦了。

原文由 Jukka K. Korpela 发布，翻译遵循 CC BY-SA 4.0 许可协议