问题有标签高度

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

当然，这样的造型会很脆弱，使得文本触及边界趋于减少可读性和美观。