html - 标签高度问题

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

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