删除inline-block元素中大文本上方和下方的空白

小编典典

删除inline-block元素中大文本上方和下方的空白

html

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

HTML：

CSS：

span {

  display: inline-block;

  font-size: 50px;

  background-color: green;

}






<span>BIG TEXT</span>

观察盒子模型，很明显浏览器正在 内容边缘内 添加填充。我需要删除此“填充”，一种方法是简单地更改行高，如下所示：

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

有跨浏览器解决方案的想法吗？谢谢！

阅读 310

2020-05-10

共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;

}


<link href='http://fonts.googleapis.com/css?family=Tinos' rel='stylesheet' type='text/css'>

<span>

    BIG TEXT

</span>

2020-05-10