html - 如何让行内元素展开到行高

Question

让我们考虑这个 block 元素:

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

为什么黄色没有占据线条的全部高度？我该如何解决？

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

编辑

经过深思熟虑，我想我已经回答了我的一些问题:

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

所以，我想让内联元素(例如 <a> 、 <span> 等)的高度等于 line-height 的正确方法是将其更改为 inline-block 元素。或者还有别的办法吗？

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

Answer 1

您可以将显示属性设置为内联 block :

样式元素

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