html - 这个空白空间实际上是开发工具无法识别的 margin-right 吗？

Question

根据 CSS 规范规则(content-box)，包含 block 的宽度等于 7 个水平属性的总和:

margin-left + border-width-left + padding-left + width + padding-right + border-width-right + margin-right.

在下面的示例中，如果上述规则为真，则右侧的 300px 必须被视为 margin-right，但 chrome 开发工具将 margin-right 显示为 0:

html {
  box-sizing: content-box;  
}

div {
  padding: 10px;
  width: 500px;
  background-color: SeaGreen;
}

p {
  height: 100px;
  background-color: LightGreen;
  width: 200px;
}

<div>
  <p>
  what is the 300px space to the right of this p called?<br>
  It looks like margin-right but the dev tools computed value
  for margin-right is 0.
  </p>
</div>

Answer 1

正如 Temani 的回答所说，本质区别在于右边距的计算值(即 0px)和使用值(在您的示例中为 300px)之间。

令人困惑的是开发工具中描述的“计算”值是什么。

属性的计算值具有非常特殊的含义。当一个子元素继承一个属性的值时，该计算值成为子元素的同一属性的指定值。因此，如果 block 元素的宽度计算值是其容器的 50%，并且其 block 元素的子元素具有 width:inherit，那么该子元素将是 50% 的 50%(= 25 %)，而不是继承父容器的像素值。

html {
  background-color:white;
}
* { padding-top: 10px; padding-bottom:10px; margin:0; }
body {
  width: 300px;
  background-color:lightyellow;
}
div {
  width: 50%;
  background-color:lightgreen;
}
p {
  width:inherit;
  background-color:lightblue;
  height:50px;
}

<div>
  <p>Hello World</p>
</div>

但是，有一个 CSSOM 方法 window.getComputedStyle()。出于向后兼容性的原因，有时这需要返回像素值而不是真正的计算值。

出于这个原因，CSSOM 定义了另一个值，称为 Resolved value . getComputedStyle() 然后，尽管它的名称返回属性的解析值，而不是它们的计算值。

现在，CSSOM 规范规定对于宽度、边距和其他一些属性，Resolved 值是 Used 值，而对于大多数其他属性，它是 Computed 值。这允许 getComputedStyle() 保持其向后兼容性，同时正确实现可继承的计算值。

然而，事实证明浏览器并没有忠实地实现这一点。如果他们这样做了，那么在您的示例中，margin-right 的 Resolved 值将考虑调整以满足相等性并返回 300px。实际上，实际返回的是转换为像素的 Computed 值。即 调整相等性之前的值。

此差异记录在当前 Unresolved CSSOM 问题中:Used value of margin properties #2328 .

开发工具的 Computed 选项卡中显示的值与 getComputedStyle() 返回的值匹配。不总是计算值，不总是使用值，对于边距，甚至不是当前定义的解析值。