用CSS减少行之间的空间（为什么我不能模仿这种风格？）

Question

试图复制Facebook使用的链接样式，撕掉我的头发。使用firebug我抓住了facebook中链接的计算css，并将其应用到我自己的。它呈现相同的，除了，无论我尝试什么，我不能缩小像facebook那样的行间距。无论我设置线高多小，线间距保持不变。我怎样才能像Facebook那样缩小我的行高，为什么我不能使用计算出的样式到达那里？

Facebook帖子链接的计算风格：

background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: none;
background-origin: padding-box;
color: #3B5998;
cursor: pointer;
direction: ltr;
display: inline;
font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
font-size: 11px;
font-weight: bold;
height: auto;
line-height: 14px;
list-style-type: none;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
text-align: left;
text-decoration: none;
unicode-bidi: normal;
width: auto;

以下是应用Facebook链接计算css的小提琴： http://jsfiddle.net/Ptcd3/10/

---

修改

根据o.v.s示例，我注意到一些更奇怪的东西 - 应用于父级的行高会覆盖应用于元素本身的行高！这与级联规则和计算样式面板中显示的内容背道而驰。

请参见此处： http://jsfiddle.net/Ptcd3/23/
我在元素上应用了9px的行高，在父元素上应用了6px的行高。 9px行高显示在计算样式中，应该如此，但渲染结果是6px行高。

在Firebug和Chrome的css检查器中都可以看到应用样式和计算样式之间的这种脱节。 ???！

Answer 1

申请display: block，它会正常工作。

Answer 2

您必须记住，计算出的规则不仅反映了应用的样式，还反映了继承的属性。 Facebook可能有一个语义样式表，在父元素上有一些设置。如果您查看firebug或类似的“应用样式”，您将看到规则是如何级联并相互补充的。

例如，这里http://jsfiddle.net/Ptcd3/16/我将行高应用于容器，并由链接继承！将它增加几个像素 - bam - 全部完成！

修改

您可能需要查看http://meyerweb.com/eric/css/inline-format.html和http://www.w3.org/TR/CSS21/visudet.html#inline-non-replaced，以便更好地了解行高计算背后的数学。如果你的最终目标是“让这个工作”，你可能想要坚持另一个答案;但是要在容器中使用多个链接。