为什么锚标签忽略容器高度但尊重宽度？

为什么锚标记忽略其容器的高度和宽度

在 HTML 中，锚标记 () 通常似乎忽略设置的高度和宽度属性对于它们的包含元素。这可以通过使用开发人员工具检查此类元素的大小来观察，如提供的 JsFiddle 中所示。

高度计算

CSS 2.1 规范规定锚标记内容区域的高度仅由其字体规格决定。由于锚标记默认为内联显示，因此它们本质上将自身包裹在其内容周围。因此，height 属性不适用于锚标记等内联元素。

在提供的示例中，锚标记内的单行文本确定 18px 的高度，无论周围元素的高度规范如何。

宽度计算

虽然锚标记不遵守其容器的高度属性，但它们确实参与宽度的计算。但是，宽度是由元素自身的内容决定的，包括内边距、边框和边距。

对于第一个锚标记，宽度计算如下：

• 内容宽度（图像空间）：114px
• 左边距：20px
• 左右边框： 2x5px
• 总宽度：144px

同理，第二个锚标签的宽度确定为：

• 内容宽度（图像）：280px
• 左边距： 20px
• 左右边框：2x5px
• 总宽度：310px

此外，锚标记内容内的间距会影响宽度计算。由于内联格式，第一个标签开头和第二个标签结尾处的空格被省略，而它们之间的空格则被折叠为一个。这个空格影响第一个标签的宽度，但不影响第二个标签的宽度。

以上是为什么锚标签忽略容器高度但尊重宽度？的详细内容。更多信息请关注PHP中文网其他相关文章！