Html 为什么文本不能完全填满它的行？

我需要确保文本的高度和行的高度完全相同。但是当字体大小和行高相同时，文本仍然比其行稍小。我在这里使用文本转换：大写，所以没有像“y”这样突出的额外部分。有没有办法解决这个问题

<div> Some Text</div>

div {
    display:inline-block;
    font-family: Lucida Sans Unicode,Verdana,Arial,Helvetica,sans-serif;
    font-size: 20px;
    line-height: 20px;
    text-transform: uppercase;
    background-color: lightgreen;
    padding: 0;
    margin: 0;
}

一些文本
div{
显示：内联块；
字体系列：Lucida Sans Unicode、Verdana、Arial、Helvetica、Sans serif；
字体大小：20px；
线高：20px；
文本转换：大写；
背景颜色：浅绿色；
填充：0；
保证金：0；
}

这是因为

字体大小是字体的最大大小。在您的示例中，
È
将填充整个高度。因此，如果您不打算使用重音字母，您应该从
行高度中删除1或2个像素

这似乎给出了一个很好的结果：

div {
  display:inline-block;
  font-family: Lucida Sans Unicode,Verdana,Arial,Helvetica,sans-serif;
  font-size: 20px;
  line-height:15px;
  text-transform: uppercase;
  background-color: red;
  padding: 0;
  margin: 0;
}

这是因为
font size
是字体的最大大小。在您的示例中，
È
将填充整个高度。因此，如果您不打算使用重音字母，您应该从
行高度中删除1或2个像素

这似乎给出了一个很好的结果：

div {
  display:inline-block;
  font-family: Lucida Sans Unicode,Verdana,Arial,Helvetica,sans-serif;
  font-size: 20px;
  line-height:15px;
  text-transform: uppercase;
  background-color: red;
  padding: 0;
  margin: 0;
}

你可以试着降低线的高度。当行高与字体大小相同时，无论是否将文本转换为大写，都会为升序和降序留出空间（如您建议的字母“y”）


你可以试着降低线的高度。当行高与字体大小相同时，无论是否将文本转换为大写，都会为升序和降序留出空间（如您建议的字母“y”）


@马修是对的。您可以使用以下方法进行欺骗：

line-height: 16px;
vertical-align: text-top;

@马修是对的。您可以使用以下方法进行欺骗：

line-height: 16px;
vertical-align: text-top;

我甚至不理解这个问题。我看不出小提琴有什么问题？文本的顶部和底部几乎没有填充像素。我试图摆脱这些，这样文本就会接触到它的容器的底部和顶部。我甚至不理解这个问题。我看不出小提琴有什么问题？文本的顶部和底部几乎没有填充像素。我正试图摆脱这些，这样文本就会触碰它的底部和顶部container@skyisred编辑了我的回答我在看到你的编辑之前发布了，但是你的答案是正确的，所以请投你一票。@TracyFu是的，我注意到你同时发布了。谢谢你的投票：）@skyisred编辑了我的答案我在看到你的编辑之前就发布了，但是你的答案是正确的，所以请你投票。@TracyFu是的，我注意到你同时发布了。谢谢你的投票：）