html - 为什么文本没有完全填满它的行？

Question

我需要确保文本的高度与其行完全相同。但是当 font-size 和 line-height 相同时，文本仍然比它的行略小。见小提琴。我在这里使用 text-transform: 大写，所以没有额外的部分突出，比如'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;
}

Answer 1

那是因为font-size是字体的最大尺寸。在您的示例中，È将填充整个高度。所以如果你不打算使用重音字母，你应该从line-height.

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

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;
}

Answer 2

您可以尝试减少行高。当 line-height 与 font-size 相同时，无论您是否将文本转换为大写，它都会为升序和降序留出空间——就像你建议的字母“y”一样。

http://jsfiddle.net/tracyfu/UwLm7/15/

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;
}

Answer 3

@mathieu 是正确的。您可以使用以下方法作弊：

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