移除内联 span 元素的填充答案

【问题标题】：Remove the padding of an inline span element移除内联 span 元素的填充
【发布时间】：2019-09-10 01:01:10
【问题描述】：

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

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

小提琴：http://jsfiddle.net/CSPFL/5/

当然还有全屏小提琴：http://jsfiddle.net/CSPFL/5/show/

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

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

【问题讨论】：

小提琴 URL 不起作用 (404)。如果省略“_bop/”部分，它们就可以工作，但它们是否指的是您的最新版本？
我把Royi的例子改了，忘记把超链接全换掉了……是的，是最新版本。
这似乎是一种非常奇怪的对齐两个元素的方式。
有趣。它似乎也与字体有关。例如。如果您使用 Verdana，则差异大于 Arial。并且它与将绝对定位的跨度放在另一个无关，它与两个相邻的跨度相同。奇数。
我想我明白了。如果位置是绝对的，则内联元素的行为就像它具有 display: 块一样。可以设置宽度、高度、边距等。如果将浮动设置为左侧，也是如此。这会改变元素的外观。

标签： html css inline padding

【解决方案1】：

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

由于您的问题是未定位的span 太高，因此在渲染中将其转换为块元素（或内联块）可能会有所帮助：添加

display: block

或

display: inline-block

对于span。

【讨论】：

真的吗？您必须在未阅读（或者您只是从我的评论中复制答案）的情况下回答。不管怎样，我比你早 15 分钟就知道了。

【解决方案2】：

试试这个：

<span style="background-color: #000; color: white; font-size: 300px;  padding: 0;float:left;">AAA</span>
<span style="background-color: #000; color: white; font-size: 300px;  padding: 0; position: absolute;float:left;">AAA</span>

http://jsfiddle.net/CSPFL/1/

【讨论】：