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

Say I have a single span element defined as an inline-block. It's only contents is plain text. When the font size is very large, you can clearly see how the browser adds a little padding above and below the text.

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

HTML:

HTML：

<span>BIG TEXT</span>

CSS:

CSS：

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

Live demo: http://jsfiddle.net/7vNpJ/

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

Looking at the box model, it's clear the browser is adding padding inside the content edge. I need to remove this "padding", one way is to simply alter the line-height, as with:

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

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

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

This works great in Chrome but in Firefox the text is shifting towards the top (FF17, Chrome 23, Mac OSX).

这在Chrome中运行良好，但在Firefox中，文字正在向顶部转移（FF17，Chrome 23，Mac OSX）。

Any idea of a cross-browser solution? Thanks!

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

5 个解决方案

#1

It appears as though you need to explicitly set a font, and change the line-height and height as needed. Assuming 'Times New Roman' is your browser's default font:

看起来好像需要明确设置字体，并根据需要更改行高和高度。假设'Times New Roman'是您浏览器的默认字体：

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

Test: http://jsfiddle.net/7vNpJ/21/

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

#2

The browser is not adding any padding. Instead, letters (even uppercase letters) are generally considerably smaller in the vertical direction than the height of the font, not to mention the line height, which is typically by default about 1.2 times the font height (font size).

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

There is no general solution to this, because fonts are different. Even for a fixed font size, the height of a letter varies by font. And uppercase letters need not have the same height in a font.

没有通用的解决方案，因为字体不同。即使是固定的字体大小，字母的高度也会因字体而异。大写字母不必在字体中具有相同的高度。

Practical solutions can be found by experimentation, but they are unavoidably font-dependent. You will need to set the line height essentially smaller than the font size. The following seems to yield the desired result in different browsers on Windows, for the Arial font:

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

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

The nested span elements are used to displace the text vertically. Otherwise, the text sits on the baseline, and under the baseline there is room reserved for descenders (as in letters j and y).

嵌套的span元素用于垂直移动文本。否则，文本位于基线上，并且在基线下面有为下行者保留的空间（如字母j和y）。

If you look closely (with zooming), you will notice that there is very small space above and below most letters here. I have set things so that the letter “G” fits in. It extends vertically a bit farther than other uppercase letters, because that way the letters look similar in height. There are similar issues with other letters, like “O”. And you need to tune the settings if you’ll need the letter “Q”, since it has a descender that extends a bit below the baseline (in Arial). And of course, if you’ll ever need “É”, or almost any diacritic mark, you’re in trouble.

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

#3

I had a similar problem. As you increase the line-height the space above the text increases. It's not padding but it will affect the vertical space between content. I found that adding a -ve top margin seemed to do the trick. It had to be done for all of the different instances of line-height and it varies with font-family too. Maybe this is something which designers need to be more aware of when passing design requirements (?) So for a particular instance of font-family and line-height:

我有类似的问题。当您增加行高时，文本上方的空间会增加。它不是填充，但它会影响内容之间的垂直空间。我发现添加-ve top margin似乎可以解决问题。它必须针对行高的所有不同实例进行，并且它也随font-family而变化。也许这是设计师在传递设计要求时需要更多注意的事情（？）所以对于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 */
}

#4

I'm a designer and our devs had this issue when dealing with Android initially, and our web devs are having the same problem. We found that the spacing between a line of text and another object (either a component like a button, or a separate line of text) that a design program spits out is incorrect. This is because the design program isn't accounting for diacritics when it is defining the "size" of a single line of text.

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

We ended up adding "Êg" to every line of text and manually creating spacers (little blue rectangles) that act as the "measurement" from the actual top of the text (ie, the top of the accent mark on the E) or from the descender (the bottom of a "g"). For example, say you have a really boring top navigation that is just a rectangle, and a headline beneath it. The design program will say that the space between the bottom of the top nav and the top of the headline textbox 24px. However, when you measure from the bottom of the nav to the top of an Ê accent mark, the spacing is actually 20px.

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

While I realize that this isn't a code solution, it should help explain the discrepancies between the design specs and what the build looks like.

虽然我意识到这不是代码解决方案，但它应该有助于解释设计规范与构建内容之间的差异。

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

有关Sketch对其类型的示例，请参阅此图像

#5

I've been annoyed by this problem often. Vertical-align would only work on bottom and center, but never top! :-(

我经常对这个问题感到恼火。垂直对齐仅适用于底部和中心，但从不顶部！ :-(

It seems I may have stumbled on a solution that works for both table elements and free paragraph elements. I hope we are at least talking similar problem here.

我似乎偶然发现了一个适用于表元素和*段元素的解决方案。我希望我们至少在这里谈论类似的问题。

CSS:

CSS：

p {
    font-family: "Times New Roman", Times, serif;
    font-size: 15px;
    background: #FFFFFF;
    margin: 0
    margin-top: 3px;
    margin-bottom: 10px;
}

For me, the margin settings sorted it out no matter where I put my "p>.../p>" code.

对我来说，无论我把“p> ... / p>”代码放在哪里，边距设置都会将其排序。

Hope this helps...

希望这可以帮助...