html - 删除内联跨度元素的填充

我有两个内联元素。您可能会认为它们完全相同，只是其中一个的位置设置为绝对位置并且位于另一个的下方。像这样:

<body style="text-align: center;">
<span style="background-color: #000; color: white; font-size: 300px; line-height: 1; padding: 0; position: relative;">
    AAA <span style="background-color: #333; color: white; font-size: 300px; line-height: 1; padding: 0; position: absolute; top: 100%; left: 0;">AAA</span>
</span>
</body>

fiddle :http://jsfiddle.net/CSPFL/5/

当然还有全屏 fiddle :http://jsfiddle.net/CSPFL/5/show/

跨度不一样高!静态跨度有某种填充。是否可以在不将位置更改为绝对位置的情况下删除此填充？提前致谢!

编辑:如果您将左侧更改为 100% 并将顶部更改为 10%，您可以看到它们的高度不同。它们在 FF for Mac 中似乎是相同的高度。

最佳答案

问题可以根据 position: absolute 来隔离。只需将它添加到具有 line-height: 1 的 span 的规则中即可更改其外观。这取决于不同类型元素的不同高度计算算法(CSS 棘手的一面的一部分)。

由于你的问题是非定位的span太高了，在渲染中将它变成 block 元素(或内联 block )可能会有所帮助:添加