div之间的边距折叠问题

Question

div之间的边距折叠问题

css

3

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

在浏览器中显示的第一个div的底部边框和第二个div的顶部边框之间的有效间距为25px。

理想情况下，边框应该防止margin折叠。这里有什么错误吗？我没有应用任何定位或浮动。

jsfiddle Code

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

- P K

将代码放入 JSFiddle：http://jsfiddle.net/UStF8/ - monkeyhouse

1

所以，这就是CSS的工作原理，它有点像一个特性。请参见https://dev59.com/5WUp5IYBdhLWcg3w_rcl。 - monkeyhouse

stackoverflow.com/questions/14891152/... – user1778606的问题在示例中没有设置任何边框，所以很明显边距会重叠。我的意思是复制一个“CSS边距重叠问题”。 - P K

3个回答

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/

- Gimmy

0

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

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

使用一个较高的margin值代替两个较低的值。:-)

- Nils Kaspersson

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- BoltClock · Accepted Answer

理想情况下，边框应该防止外边距折叠。这里的错误是什么？我没有应用任何定位或浮动。

边框不会在兄弟元素之间阻止外边距折叠 - 它们只会在父元素和子元素之间阻止外边距折叠，或者在边框与外边距交叉的地方阻止折叠。根据spec：

“当且仅当两个外边距满足以下条件时，它们是相邻的：...没有行框、清除、填充和边框将它们分开，...”

由于边框实际上并没有分隔或交叉你的两个

元素之间的外边距，因此这些外边距被认为是相邻的，因此像往常一样发生了外边距折叠。但是，你的

元素上的边框将防止其

子元素的外边距与其自身的外边距折叠。