为什么子div的边距会影响父div的边距?

Jos*_*yss 1 css formatting jquery

请参考http://jsfiddle.net/NobleWolf/X6qVv/

我有三个由 jquery 设置为窗口高度的 div,它们有一个底部边距,它们被称为“.pannel”。在每个“.pannel”中都有一个名为“.pContent”的子元素,它有一个顶部填充。

我的问题是为什么“.pContent”在“padding-top: 3%;”时会改变父级的上边距。更改为“保证金最高:3%;”

谢谢!

adr*_*ift 5

这是由于折叠边距- 如果没有边框、填充、间隙或行框分隔它们,块级元素的顶部边距将始终与其第一个流入块级子元素的顶部边距折叠。可以防止这种行为的一种方法是将每个包含 div 的显示值更改为inline-block

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