移除span元素上的填充

Question

这可能是最容易解决的问题，但我正在撕裂我的头发。我看过很多关于为跨度添加填充并在多行文本的任一侧添加填充的帖子......

我正在寻找恰恰相反的东西。我想从跨度中删除所有填充，并将背景颜色放在文本上，因此没有任何填充。

我真的玩了所有可能的东西......边距，填充，线高，花车......没有什么东西可以带走填充物！

这就是它在safari中的样子：

在IE中看起来更糟糕：

我不得不比我想要的更多地增加行高 - 否则IE会删除文本。

在把麦克风扔出窗外之前，有没有人有可能的解决方案？

＆＃13;

＆＃13;

.headerBlock {
  margin: 0px;
  padding: 0px;
  text-align: center;
}

.headerSpan {
  background-color: red;
  margin: 0px;
  padding: 1px;
  font-size: 55px;
  line-height: 60px;
  /*display: inline;*/
  text-transform: uppercase;
  font-family: 'Cervo Thin';
  color: #000;
}

＆＃13;

<h3 class="headerBlock">
  <span class="headerSpan">We're a small freelance design studio based in Surrey. We love being involved in projects that challenge our imagination and keep our creative cogs in stellar condition. If you’re itching to inject some creative genius into your projects, <a class="yellowBg" style="color: #000;" href="#">give us a shout!</a></span>
 </h3>

＆＃13;

＆＃13;

＆＃13;