Question

我预计在这种情况下，第一个div的底部边框和第二个div的顶部边框之间的垂直间隙为45px，但浏览器会崩溃底部和上边距。

浏览器显示中第一个div和第二个div的上边框的有效间隙b / w底边框为25px。

理想情况下，边境应防止保证金崩溃。这里有什么错误？我没有应用任何定位或浮动。

HTML

<body>
<div><p>A</p></div>
<div><p>B</p></div>
</body>

CSS

div{
    width:200px;
    height:200px;
}
div:nth-child(1){
    background-color: #F52C6F; 
    border-bottom: 10px solid black;
    margin-bottom: 20px;
}
div:nth-child(2){
    background-color: #0ECCCC; 
    border-top: 10px solid yellow;
    margin-top: 25px;
}

Answer 1

理想情况下，边境应防止保证金崩溃。这里有什么错误？我没有应用任何定位或浮动。

边界不会阻止兄弟姐妹之间的边际崩溃 - 它们只会阻止父母和孩子之间的边缘崩溃，或者边界与边缘相交的任何地方。

来自spec：

当且仅当：
时，两个边距相邻

...

没有行框，没有间隙，没有填充，没有边框将它们分开

...

由于边框实际上并没有分隔或交叉两个div元素之间的边距，因此边距被认为是相邻的，因此像往常一样在它们之间发生边缘崩溃。但是，div元素上的边框会阻止div与p个孩子的边缘折叠。

Answer 2

此行为实际上记录在W3C Specification on the box model: Collapsing Margins中。

基本上，相邻的垂直边距会折叠成一个边距，其中使用较大的边距值并丢弃较低的值。

使用一个较高的margin值而不是两个较低的值。 :-)

Answer 3

尝试这样的事情：

HTML：

<body>
    <div id="parent">
<div><p>A</p></div>
<div><p>B</p></div>
    </div>
</body>

CSS：

#parent
{
    width:200px;
    height:200px;
}
#parent div:nth-child(1){
    background-color: blue; 
    border-bottom: 10px solid black;
    margin-bottom: 20px;
  }
#parent div:nth-child(2){
    background-color: green; 
    border-top: 10px solid yellow;
  }

这是一个有效的jsFiddle：http://jsfiddle.net/hEDR3/

div之间的保证金崩溃问题

3 个答案: