3

在这种情况下，我期望第一个 div 的底部边框和第二个 div 的顶部边框之间的垂直间隙为 45px，但浏览器会折叠底部和顶部边距。

浏览器显示中第一个 div 的底边框和第二个 div 的顶边框的有效间隙黑白为 25 像素。

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

jsfiddle 代码

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;
}
4

3 回答 3

6

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

边框不会阻止兄弟之间的边距折叠——它们只会阻止父子之间的边距折叠，或者边框与边距相交的任何地方。

从规格：

两个边距相邻当且仅当：

  • ...
  • 没有线框，没有间隙，没有填充，没有边框将它们分开
  • ...

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

于 2013-06-02T08:56:11.137 回答
0

这种行为实际上记录在盒子模型的 W3C 规范中：Collapsing Margins。

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

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

于 2013-06-02T08:50:27.673 回答
0

尝试这样的事情：

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/

于 2013-06-02T08:52:58.483 回答