为什么过度约束元素的右边距没有按预期运行答案

【问题标题】：why is right margin of overconstrained element not behaving as expected为什么过度约束元素的右边距没有按预期运行
【发布时间】：2021-02-16 02:50:37
【问题描述】：

根据 css 规范，我发现以下代码的行为与预期不符。

<style>
    div {width: 300px; border: 1px solid black;}
    .child{width: 400px; border: 1px solid red;}

</style>
<body>
<div class="container">
    <p class="child">some text</p>
</div>

</body>

css 规范中的视觉格式化模型： https://www.w3.org/TR/CSS22/visudet.html#blockwidth

给出以下约束方程，其中左侧的属性引用包含块的子元素：

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = 包含的宽度阻止

它进一步指出：如果以上所有的计算值都不是“auto”，则这些值被称为“过度约束”，并且使用的值之一必须与其计算值不同。如果包含块的'direction'属性的值为'ltr'，则忽略'margin-right'的指定值并计算该值以使相等。

分解 w3 规范中的声明

来自 w3： "如果以上所有的计算值都不是 'auto'，则这些值被称为“过度约束”"

child 中与 width 相关的所有属性都具有除 auto 以外的值，因此该元素被过度约束。

等式是

0+ 1 + 0 + 400 + 0 + 1 + 0 = 300

来自 w3： “其中一个使用的值必须与其计算值不同。” 和 "'margin-right' 的指定值被忽略，并计算该值以使相等。"

所以这意味着我们必须调整 margin-right 来给出方程：

0+ 1 + 0 + 400 + 0 + 1 + -102 = 300

我们希望在 chrome 开发者工具中看到 -102px 的边距

但是我得到以下信息：

并且没有-ve右边距？

我基本上想了解 chrome 为子元素计算的尺寸如何满足 css 规范，而不分配 -ve 右边距。

【问题讨论】：

标签： css

【解决方案1】：

它是分配使用的右边距-102px。屏幕截图中显示的边距是计算值，而不是使用值。

如果上述所有值都具有“auto”以外的计算值，则这些值被称为“过度约束”并且使用的值之一必须与其计算值不同价值。如果包含块的'direction'属性的值为'ltr'，则忽略'margin-right'的指定值并计算该值以使相等。

见6.1.2. Computed values和6.1.3. Used values

【讨论】：

我的计算错误，边距在我的计算中应该是 -102px 而不是 -112。我已经纠正了这一点。我已经删除了（分散注意力的）第二种情况，因为它是第一种行为不正确且需要解释的情况。它显示计算的右边距为 0，而不是接近 -102px。这与 css 规范中的约束方程相矛盾，即子元素的宽度组件和包含块的宽度应该相等。

【解决方案2】：

我认为这只是 Chrome 的一项功能。例如，Firefox 在这两种情况下都将边距视为零。

【讨论】：

我已经删除了第二个案例，因为它会分散注意力，这是第一个没有按预期运行的案例。我想了解的是为什么边距为 0，根据我对 css 规范的理解，计算的边距右应该是 -102px。