html - 看看 Container 的第一个元素的边距错误!并为此给出适当的理由

Question

花点时间看看这个 fiddle 。此处，Container1 和 Container2 具有背景色:#ccc 和 h1，而 .logo div 具有边距。左右边距工作正常。为什么 Margin-Top 和 Bottom 不能正常工作。

建议仅当容器的第一个元素带有边距时才会发生这种情况。你知道为什么会这样吗？以适当的理由回答。

http://jsfiddle.net/daljir/M4X7e/5/

Answer 1

这是由于边距折叠效应，这意味着顶部/底部边距折叠。这也是元素内部不展开的原因。

更多解释在这里:

参见 w3.org/TR/CSS2/box.html#collapsing-margins ,
和 developer.mozilla.org/en-US/docs/CSS/margin_collapsing ,
和 colinaarts.com/articles/the-magic-of-overflow-hidden/

修复它:

有多种方法可以解决折叠问题，您可以将容器设置为 float: left|right(< 或 position: absolute，设置 border: solid 1px(也可以尝试 border-top: solid 1px; 以更好地理解它)或设置 min-height: height-with-margins 以防止折叠。

要记住的一点是:

When margin collapsing happens, the margin area is not clearly defined since margins are shared between boxes.

Margins of floating and absolutely positioned elements never collapse.