您似乎需要显式设置字体，并根据需要更改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;
}

<span>
    BIG TEXT
</span>

浏览器不会添加任何填充，相反，字母（甚至大写字母）在垂直方向上通常比字体高度小得多，更不用说行高了，行高通常默认为字体高度（字体大小）的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"适合。它比其他大写字母垂直延伸得更远一点，因为这样字母 * 看起来 * 高度相似。其他字母也有类似的问题，如果你需要字母"Q"，你需要调整设置，因为它有一个下降部分延伸到基线以下一点（在Arial中）。当然，如果你需要""，或者几乎任何一个变音符号，你就有麻烦了。

我是一名设计师，我们的开发人员在最初使用Android时遇到了这个问题，我们的Web开发人员也遇到了同样的问题。我们发现一行文本和另一个对象之间的间距（或者是类似按钮的组件，或单独的一行文本）是不正确的，这是因为设计程序在定义“大小”时没有考虑到变音符号一行文本的长度。
最后我们在每一行文本中添加了Êg，并手动创建了空格（蓝色小矩形），用作从文本顶部的 * 实际 *“测量”（即E上重音符号的顶部）或从降音符号（一个“g”的底部）。例如，假设你有一个非常无聊的顶部导航，它只是一个矩形，设计程序会说顶部导航栏的底部和标题文本框的顶部之间的空间是24px，然而，当你从导航栏的底部测量到重音符号的顶部时，空间实际上是20px。
虽然我意识到这不是一个代码解决方案，但它应该有助于解释设计规范和构建外观之间的差异。

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

我也遇到过类似的问题。当你增加行高时，文本上方的空间也会增加。这不是填充，但会影响内容之间的垂直空间。我发现添加一个负的顶部边距似乎可以达到这个目的。对于所有不同的行高都必须这样做，而且它也会随着字体家族的变化而变化。也许这是设计人员在通过设计要求时需要更加注意的事情（？）因此，对于字体系列和行高的特定示例：

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

这对我很有效：

line-height: 80%;

如果它的文本必须按比例缩放到屏幕宽度，你也可以使用字体作为svg，你可以直接从illustrator之类的工具导出它。我必须这样做，因为我想把左右边框的顶部与字体的顶部对齐|正文|。使用行高，文本将在缩放窗口时上下跳动。

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

inline-block;

以及

overflow: hidden;

我经常被这个问题困扰。垂直对齐只能在底部和中心工作，而不能在顶部工作!：-（
看起来我可能偶然发现了一个同时适用于表格元素和自由段落元素的解决方案。我希望我们至少在这里讨论类似的问题。
CSS：

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

对我来说，边距设置整理了它，无论我把我的"p〉.../p〉"代码。
希望这能帮上忙...