为什么利润率会影响背景图像？

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之间的垂直边距折叠 包含此溢出属性（任何不等于可见的值都可以完成工作），它将正常工作

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

仅添加红色以测试结果。你当然可以擦掉。

详细评论

你的外部div在其左下角使用了一种黄色条纹。

你的内部div的底部边距为10 px，因为此边距与外部底部边距之间没有任何内容。这就是他们崩溃的原因。

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

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

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

对于教诲porpouse，我还包括内部div的透明背景。

垂直边距折叠

由溢出阻止：隐藏

玩它。删除溢出属性并观察垂直边距折叠。 我希望对你来说足够清楚。

度过美好的一天，享受您的编码： - ）