Question

让我们考虑一下这个块元素：

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

为什么黄色不占线的全高？我该如何解决？

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

修改

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

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

因此，我认为获取内联元素（例如<a>，<span>等）以使其高度等于行高的正确方法是将其更改为内联 - 块元素。还是会有另一种方式？

由于所有这些都来自我的直觉，有人可以给我一些确认吗？

Answer 1

您可以将display属性设置为inline-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>

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

1 个答案: