如何删除这个额外的跨度高度？

Question

我偶然发现了<span>的高度大于我设置的字体大小的问题。在这里：

span {
  font-size:   36px;
  padding:     0px;
  line-height: 1;
  background:red;
}

<span>Hello world</span>

即使使用line-height: 1和padding: 0px，跨度似乎也会额外增加4个像素。我注意到display: block解决了这个问题，但就我而言，这是不切实际的，因为我需要内联。

有没有可以做到这一点的“技巧”？

Answer 1

尝试display: inline-block;

span {
  font-size: 36px;
  padding: 0px;
  line-height: 1;
  background: red;
  display: inline-block;
}

span.last {
  display: inline;
}

<span>Hello world (inline-block)</span> <span class="last">Hello world (inline)</span>

Answer 2

您可以使用CSS做到这一点，将百分比用作line-height。由于您的字体有多余的顶部和底部空间，总共有25%，因此我给了75% line-height

span {
    font-size: 36px;
    padding: 0px;
    background: red;
    line-height: 75%;
    display: inline-block;
}

<span>Hello world</span>