div之间的保证金崩溃问题

Question

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

浏览器显示中第一个div的有效间隙b / w底部边界和第二个div的顶部边框是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

理想的边界应该防止边际崩溃。 这里有什么错误？ 我没有应用任何定位或浮动。

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

从规格：

当且仅当以下情况时，两个边距相邻：

...

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

...

由于边界实际上并没有将两个div元素之间的边距分开或相交，因此边距被认为是相邻的，因此边缘会像往常一样发生崩溃。 然而，你的div元素的边界会阻止你的div的边缘与它们的p子的崩溃。

Answer 2

这种行为实际上记录在盒子模型的W3C规范中：折叠边距。

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

使用一个较高的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 个解决方案

解决方案1
6 已采纳 2013-06-02 08:56:11

解决方案2
0 2013-06-02 08:50:27

解决方案3
0 2013-06-02 08:52:58

div之间的保证金崩溃问题

问题描述

3 个解决方案

解决方案1 6 已采纳 2013-06-02 08:56:11

解决方案2 0 2013-06-02 08:50:27

解决方案3 0 2013-06-02 08:52:58

解决方案1
6 已采纳 2013-06-02 08:56:11

解决方案2
0 2013-06-02 08:50:27

解决方案3
0 2013-06-02 08:52:58