为什么锚标签不继承高度和宽度？

为什么锚标签不继承包含元素的高度和宽度

使用开发者工具检查锚标签时，用户可能会注意到其显示尺寸与实际尺寸之间的差异包含元素的。本文深入探讨了此行为背后的原因。

锚标记显示：默认内联

锚标记 () 的默认显示值为内联。这意味着它们的内容在文本中流动，并且仅占据容纳其内容所需的宽度，包括文本和任何嵌入的图像。

高度：由字体规格确定

CSS 规范指出height 属性不适用于内联、不可替换的元素，例如锚标记。相反，它们的高度是根据字体规格确定的。实际上，这相当于单行文本的高度。因此，相关锚标签的高度为 18px，对应于文本中使用的字体大小，不受图像大小或封闭 div 的高度的影响。

宽度：内容总和，间距和边距

对于非替换的内联元素，宽度属性也不适用。相反，宽度是根据元素的内容、填充、边框和边距计算的。

在提供的代码中，第一个锚标记的宽度为 144px，由图像宽度 (110px) 的总和得出)、左边距 (20px) 和两个 5px 边框。同样，第二个锚标签的宽度是 310px，根据更宽的图像宽度（280px）、左边距（20px）和 10px 边框计算得出。

空间的影响

它是值得注意的是，空格会影响计算的宽度。在这种情况下，由于锚标签布置在行框中，因此只有第一个锚标签末尾和第二个锚标签开头的空格对宽度有贡献。第一个开头和第二个结尾处的其他空格将被删除。

总之，由于显示类型和 CSS，锚标记的高度和宽度不会从其包含元素继承内联、非替换元素的规范。它们的尺寸是根据元素的内在属性确定的，例如字体规格、内容大小、间距和边距。

以上是为什么锚标签不继承高度和宽度？的详细内容。更多信息请关注PHP中文网其他相关文章！