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的边距从最后一个项目（现在是正文）开始。所以边距现在是容器的外部，所以容器现在实际上是在页面的下方 - 第一个内部div没有边距，并且正好位于容器的顶部 - 它是容器本身在第二个移动情况下。

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

当包装div没有边框时，这个浮点数如何获得最高保证金？

1 个答案: