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

Question

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

HTML:

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

?

CSS:

<span>BIG TEXT</span>

现场演示:http://jsfiddle.net/7vNpJ/

看一下盒子模型,很明显浏览器在内容边缘添加了填充.我需要删除这个"填充",一种方法是简单地改变行高,如:

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

这在Chrome中效果很好,但在Firefox中,文字正在向顶部转移(FF17,Chrome 23,Mac OSX).

有没有跨浏览器解决方案的想法？谢谢!

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

测试:http://jsfiddle.net/7vNpJ/21/

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元素用于垂直移动文本.否则,文本位于基线上,并且在基线下面有为下行器保留的空间(如字母j和y).

如果仔细观察(使用缩放),您会发现此处大多数字母上方和下方的空间非常小.我设置的东西使字母"G"适合.它垂直延伸比其他大写字母更远,因为这样字母的高度看起来相似.与其他字母有类似的问题,如"O".如果你需要字母"Q",你需要调整设置,因为它有一个下降到基线以下的位置(在Arial中).当然,如果你需要"É"或几乎任何变音符号,你就会遇到麻烦.

Answer 3

我是一名设计师，我们的开发人员在最初使用Android时遇到了这个问题，而我们的网络开发人员也遇到了同样的问题。我们发现，设计程序吐出的一行文本和另一个对象（例如按钮之类的组件或一行单独的文本）之间的间距是不正确的。这是因为设计程序在定义单行文本的“大小”时并没有考虑变音符号。

我们最终将Êg文本添加到每一行，并手动创建间隔（从蓝色文本的实际顶部（即，E上的重音符号的顶部）或从其下边的“度量”开始的小矩形）。“ g”的底部）。例如，假设您有一个非常无聊的顶部导航，它只是一个矩形，在其下方有一个标题。设计程序会说，顶部导航栏底部和标题文本框顶部之间的间隔为24px。但是，从导航栏的底部到Ê重音标记的顶部进行测量时，间距实际上为20px。

尽管我意识到这不是代码解决方案，但它应该有助于解释设计规范与内部外观之间的差异。