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

假设我有一个

span

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

HTML:

CSS:

span{
显示：内联块；
字体大小：50px；
背景颜色：绿色；
}
​
大文本
似乎需要显式设置字体，并根据需要更改
行高
和
高度。假设“Times New Roman”是浏览器的默认字体：


span{
显示：内联块；
字体大小：50px；
背景颜色：绿色；
/*新的：*/
字体系列：“新罗马时代”；
线高：34px；
高度：35px；
}

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

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

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


span.foo
{
显示：内联块；
字体大小：50px；
背景颜色：绿色；
线高：0.75em；
字体系列：Arial；
}
跨距杆
{
位置：相对位置；
底部：-0.02em；
}
大文本
我经常被这个问题困扰。垂直对齐只能在底部和中心对齐，但不能在顶部对齐！：-(

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

CSS:

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

希望这有帮助…
我也遇到了类似的问题。当你增加行高时，文本上方的空间会增加。这不是填充，但会影响内容之间的垂直空间。我发现添加一个-ve顶部边距似乎可以做到这一点。它必须针对所有不同的行高实例进行，并且随着字体fam的不同而变化我也是。
也许这是设计师在传递设计需求时需要更加注意的事情（？）
因此，对于字体系列和线条高度的特定实例：

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

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

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

虽然我意识到这不是一个代码解决方案，但它应该有助于解释设计规范和构建外观之间的差异

如果它的文本必须与屏幕宽度成比例缩放，您也可以将字体用作svg，您只需从illustrator之类的工具导出即可。
在我的例子中，我必须这样做，因为我想将左边框和右边框的顶部与字体的顶部|文本|对齐。使用行高，文本在缩放窗口时会上下跳跃

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

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

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

使用此工具找出页边距顶部和页边距底部的负页边距：

该工具还提供了SCS、LESS和手写笔示例。
您可以在此处阅读更多信息：
这对我很有效：

line-height: 80%;

最好的方法是使用显示器：

inline-block; 

及

我看不出Firefox和Chrome有什么区别。Firefox 17、Chrome 23、Mac OSX根据，CSS线条高度与Firefox完全兼容。当然，这并不意味着它呈现相同的效果。另外，w3schools是一个糟糕的资源，请参阅。我感谢您的帮助。我尝试了所有提到的解决方案上面提到但没有一个有效，因为我必须将文本放在屏幕底部，字体本身占用了额外的空间。因此，我添加了高度、行高和溢出隐藏，它在Firefox中似乎也有同样的问题，文本在顶部被截断。如果win中的字体与mac不同，请尝试加载另一种字体，例如e:有趣的是，似乎设置字体确实有效！我猜这是泰晤士报新罗马版的一个问题，幸运的是我将使用Arial。谢谢！这在很大程度上取决于字体：字体设计师决定字母相对于字体大小的高度。即使使用Arial作为字体，我的Firefox也会部分显示示例文本切断。我能够将字体切换到Arial，并调整
行高
和
行高
，使其在Chrome和FF中显示相同。我没有在Windows上测试过这种字体，但是，是的，确实检查了行高这对我来说非常有效-但有点不同。字体大小：“calc（0.75em+9vmin）；线高：计算值（0。
inline-block; 

overflow: hidden;