html - 如何增加字体的上边距？

Question

我正在尝试删除添加到字体顶部/底部的边距。

<div id="wrapper">
  <span id="text">Text</span>
</div>

#wrapper{
  width: 200px;
  height: 200px;
  Border: 1px solid black;
  margin: 0px;
  padding: 0px;
}
#text{
  background: red;
  font-size: 40px;
  line-height: 30px;
  padding: 0px;
  margin-top: 0px;
  margin-left: 5px;
}

fiddle
https://jsfiddle.net/fsmje7Ly/1/

如何将红色背景增加到字体高度？
我怎样才能从字体中删除顶部/底部边距？

我试过使用 line-height: 30px;

Answer 1

尝试下面的代码你会得到想要的输出。

#wrapper{
  width: 200px;
  height: 200px;
  Border: 1px solid black;
  margin: 0px;
  padding: 0px;
}
#text{
  background: red;
  font-size: 40px;
  line-height: 30px;
  padding: 0px;
  margin-top: 0px;
  margin-left: 0;
  display:inline-block;
}