将保证金底部添加到div

Question

我试图将margin-bottom添加到div（div.bar）但是打破了父div

在这个小提琴中，你可以查看我在说什么。

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

但是如果你向foo div添加1px边框

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