标签高度问题

Question

我希望我的标签与其中的文字大小完全相同，上下部分没有任何额外空格，就像它在图像中显示的那样（我的意思是红色矩形）

这是标记

<ul>
    <li><a href="#">content</a></li>
    <li><a href="#">content</a></li>
    <li><a href="#">content</a></li>
</ul>

这是我的JSFiddle

提前致谢。

Answer 1

我知道的唯一方法是根据行高设置高度：

li, a {
    line-height: 12px;
}

http://jsfiddle.net/EGDuU/12/

Answer 2

只有通过与所使用的特定字体和特定文本内容相关的设置才能实现。

如果您将文字设置为实心，即line-height: 1，则大多数字符和大多数字符下方仍有空间。大多数拉丁字母位于文本基线上，下方有一些空间，用于下行（以及字符下的变音符号）。另一方面，某些字符，如“j”和“Å”可能会略微伸出字体高度的边缘。

对于特定示例“内容”和Arial字体，合适的设置似乎是

li { line-height: 0.6; }
a { position: relative; bottom: 0.02em; }

当然，这样的造型会非常脆弱，并且使文字碰到边框往往会降低易读性和美观。