'line-height：1'使行高比文本高短

Question

'line-height：1'应该使行的高度的值是字体大小的一倍。

然后行的高度如何短于文本的高度？

以下代码段演示了这种情况。字母“ g”使行高溢出。选择所有文本有助于查看。

.item {
  font-size: 10rem;
  background: green;
  padding: 0;
  margin: 0;
  line-height: 1;
}

<div class="item">This first thing</div>
<div class="item">This last thing</div>

谢谢。

/编辑 该问题已被标记为重复。其他问题询问特定字符是否可以更改行高，我问为什么行高：1创建的行框比内容框短。显然不同，不是重复。

尽管如此，另一个问题的答案仍包含一个部分，清楚地回答了该问题的要求。

Answer 1

您有一个正确的想法-但可悲的是，字体大小实际上并不总是与从最高的上升器的顶部到最低的下降器的底部的距离相关。这只是说应该按照您的思维方式工作而已。 https://graphicdesign.stackexchange.com/questions/4035/what-does-the-size-of-the-font-translate-to-exactly

如果您使用line-height: normal;

，浏览器会完成“计算”适当的行高的正常工作

.item {
  font-size: 10rem;
  background: green;
  padding: 0;
  margin: 0;
  line-height: 10rem;
}

<div class="item">This first thing</div>
<div class="item">This last thing</div>