非常简单的html意外保证金

尽管strager的答案已经解释了你需要知道它为什么会发生 - 也就是说它发生在IE以外的浏览器中,因为规格说明了 - 我认为他从部分选择了错误的引用的CSS 2.1规范关于崩溃边缘.

他引用的观点解释了边际如何崩溃,而不是它们如何"移动"到父元素.

这就是解释它的原因:

如果框的顶部和底部边距相邻,则边距可能会通过它折叠.在这种情况下,元素的位置取决于其与边缘正在折叠的其他元素的关系.

如果元素的边距与其父元素的上边距折叠,则框的上边框边缘定义为与父元素相同.

或者,在Mozilla开发人员文档中稍微以人类可读的形式:

父母和第一个/最后一个孩子:

如果没有边框,填充,内联内容或间隙将块的边距顶部与其第一个子块的边距顶部分开,或者没有边框,填充,内联内容,高度,最小高度或最大值 - 高度将块的边缘底部与其最后一个子节点的边缘底部分开,然后这些边距崩溃.折叠的保证金最终在父母之外.

至于如何修复它,我可能会选择Chris Lloyd提出的overflow: auto解决方案(尽管可能有副作用).

但那真的取决于代码的其余部分是什么样的.在这个简单的例子,你可以很容易地只是改变保证金的子元素的填充父元素.

或者你可以浮动子元素,或绝对定位它...

或者如果你想要真正的幻想,如何反向clearfix:

.outer:before {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}