花点时间看看这个小提琴。这里,Container1 和 Container2 有 background-color:#ccc 和 h1,.logo div 有边距。左边距和右边距工作正常。为什么 Margin-Top 和 bottom 无法正常工作。
建议仅当容器具有带边距的第一个元素时才会发生这种情况。你知道为什么会这样吗?以适当的理由回答。
花点时间看看这个小提琴。这里,Container1 和 Container2 有 background-color:#ccc 和 h1,.logo div 有边距。左边距和右边距工作正常。为什么 Margin-Top 和 bottom 无法正常工作。
建议仅当容器具有带边距的第一个元素时才会发生这种情况。你知道为什么会这样吗?以适当的理由回答。
这是由于边距折叠效应,这意味着顶部/底部边距折叠。这也是元素没有在内部扩展的原因。
请参阅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
为防止折叠。
当边缘折叠发生时,边缘区域没有明确定义,因为边缘在框之间共享。
浮动和绝对定位元素的边距永远不会塌陷。