根据 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>
最佳答案
正如 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()
返回的值匹配。不总是计算值,不总是使用值,对于边距,甚至不是当前定义的解析值。
关于html - 这个空白空间实际上是开发工具无法识别的 margin-right 吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66420066/