Question

在我们的一个项目中，我们注意到所有主流浏览器中的以下奇怪计算（Firefox 22.0，Chrome 28.0.1500.72 m，IE 10.0.9200.16521）

考虑以下HTML代码：

<div>
    <div style="height:100px">Head</div>
    <div style="height:200px">
        <p style="margin:10px">This goes wrong</p>
        Wrong wrong wrong
    </div>
</div>
<div>
    <div style="height:100px">Head</div>
    <div style="height:200px">
        Right right right
        <p style="margin:10px">This goes right</p>
        Right right right
    </div>
</div>

您也可以在http://jsfiddle.net/Cnjdg/

上找到代码示例

如果你检查2个顶级DIV的计算高度，你会发现一些奇怪的东西：DIV1高310px而DIV2高300px ......现在逻辑告诉我DIV和它的孩子一样高（特别是因为没有已经应用了特殊样式）对我来说意味着两个DIV元素应该返回300px高度。

因此，当孩子的最顶部有一个带有上边距的元素时，似乎在计算父母的高度时会考虑这个高度。这是一个错误吗？这是有意的吗？为了什么目的？

Answer 1

事实上，内容“这出错”的p实际上正在推动其父母，所以检查员说实话。我修改了你的小提琴添加颜色和更高的边距。现在很明显，块的高度不同，推动行为也很明显。 http://jsfiddle.net/Cnjdg/1/

<div>
    <div style="height:100px; background-color: blue">Head</div>
    <div style="height:200px; background-color: red">
        <p style="margin:50px">This goes wrong</p>
        Wrong wrong wrong
    </div>
</div>
<div>
    <div style="height:100px; background-color: green">Head</div>
    <div style="height:200px; background-color: yellow">
        Right right right
        <p style="margin:50px">This goes right</p>
        Right right right
    </div>
</div>

这是有意的，不是错误。据我所知，没有特殊目的。如果您不喜欢这种行为，可以使用填充。

此外，保证金也相互崩溃。如果父母的边际为“70px”，那么整个边距将是70px而不是（70 + 50）px。如果“Head”div的底部边距为30px。整个边距为50px，而不是（30 + 50）px。

如果你必须使用边距，你可以使用伪元素玩法： http://jsfiddle.net/Cnjdg/2/ 在父母的假元素中...

content: "\00a0";
display: block;
height: 0;
overflow: hidden;

Answer 2

最后有一点时间并受到davidgnin回复的启发，我更深入地探索了W3C的盒子模型定义。这肯定回答了我的问题这是一个错误吗？和这是打算吗？，答案是：否和是

您会找到解释here的原因，其中明确说明了以下内容：

如果元素没有顶部边框，没有顶部填充，并且孩子没有间隙，则流入块元素的上边距会与其第一个流入块级子元素的上边距折叠。

为什么要这样做的原因对我来说有点不清楚（所以我欢迎任何能够解释这背后推理的人）因此我无法回答我的问题为了什么目的？

幸运的是，知道为什么会发生这种情况也使我们能够对抗这种影响：

例如，使用overflow:hidden
建立新的block formatting context
通过填充，边框，内联元素或clearance
分隔父级和子级
我希望这可以帮助某些人在同样的情况下结束。

错误地考虑了Web浏览器高度计算的最高保证金？

2 个答案: