在行内块元素中删除大文本上方和下方的空白区域
说我有一个单一的span元素定义为内联块。 只有内容是纯文本。 当字体大小非常大时，您可以清楚地看到浏览器如何在文本上方和下方添加一些填充。
HTML：
<span>BIG TEXT</span>
CSS：
span { display: inline-block; font-size: 50px; background-color: green; }
现场演示： http : //jsfiddle.net/7vNpJ/
看看盒子模型，显然浏览器正在内容边缘添加填充。 我需要删除这个“填充”，一种方法是简单地改变行高，如下所示：
http://jsfiddle.net/7vNpJ/1/
这在Chrome中非常有用，但在Firefox中文本正在向顶端（FF17，Chrome 23，Mac OSX）转移。
任何想法的跨浏览器解决scheme？ 谢谢！
看起来您需要明确设置字体，并根据需要更改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; }
testing： http : //jsfiddle.net/7vNpJ/21/
浏览器不添加任何填充。 相反，字母（甚至是大写字母）在垂直方向上通常比字体的高度小得多，更不用说线高度，通常默认是字体高度的1.2倍（字体大小）。
没有通用的解决scheme，因为字体是不同的。 即使对于固定的字体大小，字母的高度也会因字体而异。 大写字母在字体中不必具有相同的高度。
实际的解决scheme可以通过实验find，但是它们不可避免地与字体有关。 您将需要设置行高度基本上小于字体大小。 以下似乎在Windows上的不同浏览器中产生所需的结果，对于Arial字体：
<style> 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; } </style> <span class=foo><span class=bar>BIG TEXT</span></span>
嵌套的span元素用于垂直移动文本。 否则，文本位于基线上，并且在基线之下，为下行者预留空间（如字母j和y）。
如果仔细观察（缩放），您会发现在这里大多数字母的上方和下方都有很小的空间。 我已经设置了让字母“G”适合的东西。它垂直延伸比其他大写字母稍远一些，因为这样字母看起来高度相似。 其他字母也有类似的问题，比如“O”。 如果需要字母“Q”，则需要调整设置，因为它具有延伸到基线以下的下行（在Arial中）。 当然，如果你需要“É”，或者几乎所有的变音符号，你都会遇到麻烦。
我有一个类似的问题。 当你增加行高时，文本上方的空间增加。 这不是填充，但会影响内容之间的垂直空间。 我发现添加一个-ve顶部边缘似乎是诀窍。 必须对所有不同的行高实例进行处理，并且也随着字体系列而变化。 也许这是devise师在通过devise要求时需要更加注意的事情（？）因此，对于font-family和line-height的特定实例：
h1 { font-family: 'Garamond Premier Pro Regular'; font-size: 24px; color: #001230; line-height: 29px; margin-top: -5px; /* CORRECTION FOR LINE-HEIGHT */ }
我经常被这个问题困扰。 垂直alignment只能在底部和中心，但从不顶部！ 🙁
看起来我可能偶然发现了一个适用于表格元素和自由段落元素的解决scheme。 我希望我们至less在这里谈论类似的问题。
CSS：
p { font-family: "Times New Roman", Times, serif; font-size: 15px; background: #FFFFFF; margin: 0 margin-top: 3px; margin-bottom: 10px; }
对我来说，无论我把“p> … / p>”代码放在哪里，保证金设置都将它整理出来。
希望这可以帮助…
