时间戳

首页 > 解决方案 > 'line-height: 1' 使行高短于文本高度

html - 'line-height: 1' 使行高短于文本高度

问题描述

'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>

谢谢。

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

然而，另一个问题的答案包括一个部分，它清楚地回答了这个问题中的问题。

标签： htmlcsstypography

解决方案

你有正确的想法 - 但遗憾的是字体大小实际上并不总是与从最高上升器顶部到最低下降器底部的距离相关。这只是更多的备份，说它应该按照您的想法工作。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>

推荐阅读