Html 删除行内块元素中大文本上方和下方的空白
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14061228/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Remove white space above and below large text in an inline-block element
提问by MusikAnimal
Say I have a single spanelement 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：
CSS:
CSS：
span {
display: inline-block;
font-size: 50px;
background-color: green;
}
?<span>BIG TEXT</span>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:
查看框模型，很明显浏览器正在内容边缘内添加填充。我需要删除这个“填充”，一种方法是简单地改变行高，如下所示：
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!
任何跨浏览器解决方案的想法？谢谢！
采纳答案by karacas
It appears as though you need to explicitly set a font, and change the line-heightand heightas needed. Assuming 'Times New Roman' is your browser's default font:
看起来好像您需要明确设置字体，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>回答by Jukka K. Korpela
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 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 上的不同浏览器中产生了所需的结果：
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 class=foo><span class=bar>BIG TEXT</span></span>The nested spanelements 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 looksimilar 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）。当然，如果您需要“é”或几乎任何变音符号，那您就有麻烦了。
回答by Sarah McDermott
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 êgto every line of text and manually creating spacers (little blue rectangles) that act as the "measurement" from the actualtop 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.
我们最终添加êg到每一行文本并手动创建分隔符（蓝色小矩形），作为从文本的实际顶部（即 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.
虽然我意识到这不是代码解决方案，但它应该有助于解释设计规范与构建外观之间的差异。
回答by omar j
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 顶部边距似乎可以解决问题。必须为所有不同的 line-height 实例完成它，并且它也随着 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 */
}
回答by Servus
If its text that has to scale proportionally to the screenwidth, you can also use the font as an svg, you can just export it from something like illustrator. I had to do this in my case, because I wanted to align the top of left and right border with the font's top |TEXT| . Using line-height, the text will jump up and down when scaling the window.
如果它的文本必须与屏幕宽度成比例地缩放，您也可以将字体用作svg，您可以从 illustrator 之类的东西中导出它。在我的情况下，我必须这样做，因为我想将左右边框的顶部与字体的顶部对齐 |TEXT| . 使用 line-height，缩放窗口时文本会上下跳跃。
回答by galengodis
span::before,
span::after {
content: '';
display: block;
height: 0;
width: 0;
}
span::before{
margin-top:-6px;
}
span::after{
margin-bottom:-8px;
}
Find out the margin-top and margin-bottom negative margins with this tool: http://text-crop.eightshapes.com/
使用此工具找出 margin-top 和 margin-bottom 负边距：http: //text-crop.eightshapes.com/
The tool also gives you SCSS, LESS and Stylus examples. You can read more about it here: https://medium.com/eightshapes-llc/cropping-away-negative-impacts-of-line-height-84d744e016ce
该工具还为您提供了 SCSS、LESS 和 Stylus 示例。您可以在此处阅读更多相关信息：https: //medium.com/eightshapes-llc/cropping-away-negative-impacts-of-line-height-84d744e016ce
回答by Samhamsam
This worked for me:
这对我有用：
line-height: 80%;
回答by Quentin Rowe
I've been annoyed by this problem often. Vertical-align would only work on bottom and center, but never top! :-(
我经常被这个问题困扰。Vertical-align 只适用于底部和中心，但不能用于顶部！:-(
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...
希望这可以帮助...
