为什么锚标签在显示时更高：内联块

Question

我在这里有一个例子：https://jsfiddle.net/d7gujhLL/

你可以看到第二个红色比第一个红色高。

有没有办法让它们达到同样的高度？

<p style="background-color:blue">
<a style="background-color:red" href="">Inline</a>
</p>

<p style="background-color:blue">
<a style="background-color:red; display:inline-block" href="">Inline-block</a>
</p>

由于

Answer 1

你从行高处看到了额外的空间。

设置line-height: 1。

Answer 2

没有简单的方法可以让它们达到同样的高度。内联锚点的高度基于字体度量。它是从上升器顶部到下降器底部的高度。虽然这是font-size的倍数，但每种字体可能有不同的倍数。

内联块锚点的高度基于行高。这也可以设置为font-size的倍数，但为了使它们具有相同的高度，您必须将该倍数设置为与内联锚点的倍数完全相同。这意味着检查所选字体的字体指标，以便发现该多数是什么。