为啥子div的边距会影响父div的边距？ [复制]

Posted 2023-03-06

【中文标题】为啥子div的边距会影响父div的边距？ [复制]

【英文标题】：Why does the child div's margin affect the margin of the parent? [duplicate]为什么子div的边距会影响父div的边距？ [复制]

【发布时间】：2013-06-12 19:14:04

【问题描述】：

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

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

我的问题是为什么“.pContent”会在“padding-top: 3%;”时改变父级的上边距改为“margin-top: 3%;”

谢谢！

【参考方案1】：

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

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

【讨论】：

唯一的事情是当更改为 inline-block 时，div 不再以自动左右边距为中心。保留原始格式会不会有什么问题、兼容性问题等等？

还有其他方法 - 正如@staircasebug 指出的那样，您还可以通过将overflow: hidden; 添加到.pannel 来创建新的块格式化上下文：jsfiddle.net/X6qVv/3

【参考方案2】：

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

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

见小提琴 - 溢出隐藏应用于 .pannel 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? */