0

我有如下简单的 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;}
4

1 回答 1

0

您正在尝试嵌套 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 底部边距之间没有任何内容。这就是他们崩溃的原因。

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

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

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

对于教学 porpouse，我还在内部 div 中加入了透明背景。

垂直边距折叠

垂直边距折叠

防止溢出：隐藏

防止溢出：隐藏

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

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

于 2013-02-21T02:22:44.613 回答