当包装 div 没有边框时，这个浮动 div 如何获得上边距？

Question

请注意，我不是在询问是否解决问题，而是我想知道当包装 div 设置为 0px 边框时，浮动 div 是如何获得边距的。但是，当包装 div 设置了 1px 边框时，浮动 div 不会获得边距，但在这两种情况下，secondDiv 都会按预期获得上边距。

请注意，我了解边缘折叠主题，但它与设置边框有什么关系？

<div id="container">    
    <div id="firstDiv">FIRST Div inside CONTAINER</div>
    <div id="secondDiv">SECOND Div inside CONTAINER</div>
</div>


body{
    width: 780px;
    margin: 00px auto;
}
#container {
    border: 1px solid orange;   /* but when its set to 0px then floated div gets margin too*/
}
#firstDiv{         
    float:left;
}
#secondDiv{  
     margin: 14px;        
}

http://jsfiddle.net/dmpxw/

现在，如果包装 div 的边框设置为 0px，那么浮动也会被向下推。但我认为它不应该像以前那样留在那里吗？

http://jsfiddle.net/dmpxw/1/

Answer 1

这很有趣。

当容器有边框时，第二个内部 div 的边距从边框开始运行 - 即边距从边框开始应用。这是因为边框是在边距测量之前应用的最后一项。

当容器没有边框时，第二个内部 div 的边距从最后一项开始，也就是现在的 body。所以边距现在在容器的外面，所以容器现在实际上在页面的下方 - 第一个内部 div 没有边距，并且就在容器的顶部 - 它是容器本身移动到了第二个案例。

如果您为示例添加背景颜色，您可以看到当您有边框时，边距位于容器内，而当您没有边框时，边距位于容器外。 View the example on JSFiddle.