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

Remove white space above and below large text in an inline-block element

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

HTML：

CSS：

1
2
3
4
5
6
7

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

?

1	<span>BIG TEXT</span>

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

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

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

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

相关讨论

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14

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

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

嵌套的span元素用于垂直放置文本。否则，文本将位于基线上，并且在基线之下，为后代保留了空间(如字母j和y)。

如果仔细观察(缩放)，您会发现这里大多数字母的上方和下方都有很小的空间。我已经进行了设置，以使字母" G"适合放入其中。它比其他大写字母在垂直方向上延伸得更远，因为这样一来，这些字母在高度上看起来就很相似。其他字母也有类似的问题，例如" O"。而且，如果您需要字母" Q"，则需要调整设置，因为它的下坡延伸到基线以下(在Arial中)。当然，如果您永远需要"é"或几乎任何变音符号，那就麻烦了。

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

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

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

See this image for an example of what Sketch does with type

我有一个类似的问题。随着行高的增加，文本上方的空间也会增加。它不是填充，但会影响内容之间的垂直空间。我发现添加-ve最高边距似乎可以解决问题。必须针对所有不同的行高实例完成此操作，并且它也随字体系列而变化。
也许这是设计师在通过设计要求时需要更加了解的东西(？)
因此，对于font-family和line-height的特定实例：

1
2
3
4
5
6
7

h1 {
font-family: 'Garamond Premier Pro Regular';
font-size: 24px;
color: #001230;
line-height: 29px;
margin-top: -5px; /* CORRECTION FOR LINE-HEIGHT */
}