增加保证金底部的一个div

Question

我尝试下边距添加到一个div（div.bar），但更是打破了父DIV

在这拨弄你可以检查说什么IM。

http://jsfiddle.net/dmsf/2JggY/

，但如果添加了一个1px的边框给foo的DIV

.foo { 
    background-color:#FFF; 
    border: 1px solid; 
    margin: 10px; 
} 

预期它会奏效。

有可能让它在没有1px边框的情况下工作吗？

Answer 1

在父级上设置{overflow：hidden}或{overflow：auto}。

http://jsfiddle.net/2JggY/1/

.foo { 
    overflow: auto 
} 

Answer 2

它是塌陷边距（http://reference.sitepoint.com/css/collapsingmargins）的情况下，有一些方法来解决这个问题， 一种是使用元素的内部填充。以您的示例为例，使用底部填充.foo代替.bar上的保证金底部。http://jsfiddle.net/davidpett/g2CzH/

.foo { 
    background-color:#FFF; 
    margin: 10px; 
    padding-bottom: 50px; 
} 

.bar { 
    height:100px; 
    background-color:#333; 
}