无序列表推送父元素

Question

我有两个div,一个嵌套在另一个,即#messagesdiv在#mainContentdiv内.该#messagesDIV应该从其父顶部0像素.一切都很好,直到我把unordered list它放入其中,然后它将整个div从整个#messagesdiv向下推几个像素.

如果我把margin-top:0px;在上ul元素,一切都很好了,但我想了ul是margin-top:10px;从它的#messages母公司.如果我把margin-top:10px;它再次推出#messages10px #mainContent.

有人可以解释为什么会发生这种情况,有人可以为此提供一个干净的解决方案吗？

谢谢,它jsfiddle是:

http://jsfiddle.net/wtKuP/4/

Answer 1

" 有人可以解释为什么会发生这种情况,有人可以为此提供一个干净的解决方案吗？ "

块级元素的顶部边距及其第一个流内块级子元素将始终崩溃.有许多方法可以避免这种情况(请阅读上面的链接以获取完整列表) - 一种是只添加overflow: hidden到父节点,<ul>因为这会创建一个新的块格式化上下文并阻止标准边距折叠行为.

http://jsfiddle.net/wtKuP/22/

从2.1规范,第8.3.1节:

建立新块格式化上下文的元素的边距(例如浮点数和"溢出"除"可见"之外的元素)不会因其流入的子节点而崩溃.