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

我有简单的HTML和CSS如下。我注意到.outside框和.inside框之间的底部边距崩溃。 我不明白为什么我看不到背景图像时底部边距崩溃，背景图像应该没有关于边距。谢谢:)为什么利润率崩溃影响背景图像？

<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;}

来源

2013-02-21 blurfun

使用'背景image'代替'background' – jjj 2013-02-21 01:44:00

您正在试验的嵌套的div之间的垂直边距崩溃包含此overflow属性（不等于可见光会做工作的任何值），它会工作正常

.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。但是这会改变你的设计意图。

这就是为什么我建议使用溢出属性，这也可以防止垂直边缘崩溃，不会干扰您的设计。

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

对于教诲porpouse我还包括一个透明背景的内部股利。

垂直边距倒塌

Vertical Margins collapsing

通过溢出防治：隐藏

Prevented by overflow:hidden

播放它。删除溢出属性并观察垂直边缘折叠。我希望你已经够清楚了。

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

来源

2013-02-21 02:22:44 Fico

为什么使用溢出：隐藏可以显示背景图片了吗？ – blurfun 2013-02-21 03:41:11

Hy。我刚刚回复您的评论时回复了答案。我还包括一个jsFiddle。 – Fico 2013-02-21 12:21:52

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

回答

相关问题