css - 将边距底部添加到 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 上使用 padding-bottom 而不是 .bar http://jsfiddle.net/davidpett/g2CzH/上的边距底部

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

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