css - 当包装 div 没有边框时，这个 float div 如何获得上边距？

Question

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

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

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

Answer 1

这很有趣。

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

当容器没有边框时，第二个内部 div 的边距从最后一个元素(现在是正文)开始。因此，边距现在位于容器的外部，因此容器现在实际上位于页面的更下方 - 第一个内部 div 没有边距，并且位于容器的顶部 - 容器本身已在第二个内部移动案例。

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