花点时间看看这个小提琴。这里，Container1 和 Container2 有 background-color:#ccc 和 h1，.logo div 有边距。左边距和右边距工作正常。为什么 Margin-Top 和 bottom 无法正常工作。
建议仅当容器具有带边距的第一个元素时才会发生这种情况。你知道为什么会这样吗？以适当的理由回答。
问问题
161 次
1 回答
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, set border: solid 1px(也尝试border-top: solid 1px;更好地理解它) 或设置min-height: height-with-margins为防止折叠。
需要记住的是：
当边缘折叠发生时，边缘区域没有明确定义，因为边缘在框之间共享。
浮动和绝对定位元素的边距永远不会塌陷。
于 2012-10-18T09:01:43.570 回答