如何使内联元素扩展到行高

Question

让我们考虑这个块元素：

<div style="background-color: gray; line-height: 30px;">
Some text and a <a style="background-color: yellow;">link<a>
<div>

为什么黄色没有占据整个线条的高度？我该怎么修？

此外，如果我在这行上放一个内联块，它就会扩展到该行的整个高度。为什么在这种情况下？

编辑

仔细思考后，我想我已经回答了一些问题：

首先，内联元素的宽度和高度不受行高属性的影响，因此<a>元素的黄色区域的大小也不受影响。其次，内联块元素似乎扩展到行高的原因是因为它们继承了其父元素的行高属性。因此，当我在内联块元素中编写一些文本时，该文本的行高等于其父行高。内联块的高度会扩展，这样它就可以得到它内部的所有内容(=文本的行高)。这可以通过创建一个没有文本和定义宽度的内联块来验证。在这种情况下，根本不会有黄色区域，因为内联块(像任何块元素一样)为空时的高度为0。

因此，我想让内联元素(如<a>、<span>等)的高度等于行高度的正确方法是将其更改为内联块元素。或者还有别的办法吗？

既然这一切都来自我的直觉，有人能给我一些证实吗？

Answer 1

您可以将显示属性设置为内联块：

样式元素

<style>
#your_dive {
background-color: gray;
line-height: 30px;
}
#your_anchor {
diskplay: inline-block;
background-color: yellow;
}
</style>

HTML元素

<div id="your_dive">
Some text and a <a id="your_anchor">link</a>
</div>