为什么锚标记不从其父容器继承维度？

锚标记：为什么它们不从容器继承维度

渲染网页时，锚标记的大小可能会令人困惑。尽管包含在具有明确高度和宽度的元素中，锚标记通常无法继承这些尺寸。为了阐明这种行为，让我们深入研究 CSS 规范并探索其背后的机制。

CSS 规范

根据 CSS 2.1 规范，盒子内容区域的尺寸（宽度和高度） ）受到各种因素的影响，包括生成元素是否设置了“宽度”或“高度”属性、框中是否存在文本或其他框以及特定于表格的元素

锚标记显示属性

默认情况下， （锚）标签拥有内联显示值。内联元素及其内容直接参与页面的布局。这种非替换元素的性质会影响其尺寸的确定方式。

高度计算

对于锚标记等内联非替换元素，“height”属性不适用。相反，内容区域的高度基于字体，如 CSS 规范中所述。在给定的示例中，锚标记高度为 18px，源自图像中的单行文本。图像内容和容器的高度都不起作用。

宽度计算

“width”属性也不适用于内联、非替换元素。宽度由锚标记的内容、填充、边框和边距决定。对于第一个锚标记，宽度计算如下：

Width = content (114px) + left margin (20px) + left and right borders (10px) = 144px

对于第二个锚标记：

Width = content (280px) + left margin (20px) + left and right borders (10px) = 310px

空间处理

此外，空间处理影响宽度计算。在内联上下文中，前导（最左边）和尾随（最右边）空格被丢弃，而间隙空格被折叠成单个空格。这可能会向锚标记的宽度添加空间，从而影响宽度计算。

以上是为什么锚标记不从其父容器继承维度？的详细内容。更多信息请关注PHP中文网其他相关文章！