Question

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

HTML：

CSS：

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

<span>BIG TEXT</span>

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

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

<link href='http://fonts.googleapis.com/css?family=Tinos' rel='stylesheet' type='text/css'>
<span>
    BIG TEXT
</span>

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 class=foo><span class=bar>BIG TEXT</span></span>

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

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

Answer 3

我有类似的问题。当您增加行高时，文本上方的空间会增加。它不是填充，但会影响内容之间的垂直空间。我发现添加-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 */
}

Answer 4

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

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

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

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

Answer 5

span::before,
span::after {
    content: '';
    display: block;
    height: 0;
    width: 0;
}

span::before{
    margin-top:-6px;
}

span::after{
    margin-bottom:-8px;
}

使用此工具找出上边距和下边距负边距： http://text-crop.eightshapes.com/

该工具还提供了SCSS，LESS和Stylus示例。你可以在这里读更多关于它的内容： https://medium.com/eightshapes-llc/cropping-away-negative-impacts-of-line-height-84d744e016ce

Answer 6

这对我有用：

line-height: 80%;

Answer 7

如果其文本必须与屏幕宽度成比例地缩放，则还可以将字体用作 svg ，也可以从illustrator之类的文件中导出。我必须这样做，因为我想使左右边框的顶部与字体的顶部| TEXT |对齐。。使用行高，缩放窗口时文本将上下跳动。

Answer 8

最好的方法是使用显示：

inline-block;

和

overflow: hidden;

Answer 9

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

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

CSS：

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

对我来说，无论我把我的＆＃34; p＆gt; ... / p＆gt;＆＃34;放在哪里，保证金设置都会将其整理出来。代码。

希望这会有所帮助......

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

9 个答案: