css - 当 wrapper div 没有边框时，这个 float div 如何获得 top margin？

Question

请注意，我不是在询问如何纠正问题，而是想知道当 wrapper div 设置了 0px 边框时， float div 如何获得边距。但是当 wrapper div 设置了 1px 边框时， float 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/

现在，如果 wrapper div 的边框设置为 0px，那么 float 也会向下推。但我认为它不应该像以前的情况那样留在那儿吗？

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

Answer 1

这很有趣。

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

当容器没有边框时，第二个内部 div 的边距从最后一个元素(现在是主体)开始运行。所以边距现在在容器的外面，所以容器现在实际上在页面的下方 - 第一个内部 div 没有边距，并且正好在容器的顶部 - 它是容器本身在第二个中移动了案例。

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