为什么子div的保证金会影响父母的保证金？

Question

请参阅http://jsfiddle.net/NobleWolf/X6qVv/。

我有三个由jquery设置为窗口高度的div，它们有一个底边距，它们被称为'.pannel'。每个'.pannel'里面都有一个名为'.pContent'的孩子，它有一个顶部填充。

我的问题是为什么'.pContent'会在“padding-top：3％;”时更改父级的上边距。更改为“margin-top：3％;”

谢谢！

Answer 1

这是由于collapsing margins - 如果没有边框，填充，间隙或行框分隔，则块级元素的上边距将始终与其第一个流入块级子元素的上边距一起折叠他们。阻止此行为的一种方法是将每个包含div的显示值更改为inline-block：

http://jsfiddle.net/X6qVv/4/

Answer 2

保证金崩溃。有关避免它的一些示例，请参阅下面的参考资料。

https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing http://reference.sitepoint.com/css/collapsingmargins

请参阅小提琴 - 溢出隐藏应用于.panel http://jsfiddle.net/pTTQQ/

.pannel {
width: 100%;
padding-bottom: 10%;
overflow:hidden;
}
.pContent {
width: 90%;
height: auto;
margin: 0 auto 0 auto;
margin-top: 3%;/* Why can't this be margin top? */
}