Question

我需要确保文本的高度与其行完全相同。但是当font-size和line-height相同时，文本仍然比它的行略小。 See Fiddle。我在这里使用text-transform：uppercase，因此没有额外的部分突出，比如'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中删除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;
}

Answer 2

您可以尝试降低行高。当行高与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;

为什么没有文字完全填满它的行？

3 个答案: