css - 为什么边距塌陷效果背景图片？

Question

我有如下简单的 HTML 和 CSS。我注意到 .outside box 和 .inside box 之间的底部边距塌陷。 我不明白为什么底部边距折叠时我看不到背景图片，背景图片应该与边距无关。 谢谢:)

<div class="outside"> 
<div class="inside"> content </div>
</div>


.outside {background:url(http://blurfun.com/temp/images/bottom.png) left bottom no-repeat;    padding-top:1px;}

.inside { background:#00CCFF; margin:0 0 10px 0; padding:0 0 20px 0;}

Answer 1

您正在尝试嵌套 div 之间的垂直边距折叠 包括这个溢出属性(任何不等于 visible 的值都可以完成这项工作)，它会正常工作

    .outside {
       background:#ff0000 url(http://blurfun.com/temp/images/bottom.png) left bottom        no-repeat;    
padding-top:1px;
        overflow:hidden;
    }

添加红色只是为了测试结果。当然可以擦。

详细评论

您的外部 div 在其左下角使用了一种黄色 strip 。

您的内部 div 的底部边距为 10 像素，因为该边距和外部 div 底部边距之间没有任何内容。这就是他们崩溃的原因。

您可以防止这种情况发生，包括底部填充或什至外部 div 的底部边框。但这会改变您的设计意图。

这就是为什么我建议使用 overflow 属性，它也可以防止垂直边距折叠并且不会干扰您的设计。

在此fiddle我在内部 div 中添加了左边距，在外部 div 中添加了红色背景。

对于教学海豚，我还在内部 div 中包含了一个透明背景。

垂直边距折叠

被溢出阻止:隐藏

玩它。删除 overflow 属性并观察垂直边距折叠。 我希望你已经足够清楚了。

祝你有美好的一天，享受你的编码:-)