为什么没有内容的div会受到子元素的影响

Question

我尝试用罗盘（sass框架）做一些css3动画。 我偶然发现没有内容的div会受到影响。 以下是我的示例代码

HTML

<div class="box">
    <div class="ball"></div>
    <div class="ball"></div>
</div>

萨斯

@import "compass/css3"

.box
    width: 600px
    height: 600px
    background-color: pink
    .ball
        width: 40px
        height: 40px
        +border-radius(100%)
        background-color: black
        margin-top: 50px  // How to just margin top the ball div

结果看起来像这样。 div.box跟随ball.div边缘前200px，但我希望它保持在页面顶部。

但是当我在div.box中添加一些内容时，结果表现不错，但有一些多余的内容。

<div class="box">0
    <div class="ball"></div>
    <div class="ball"></div>
</div>

我很奇怪为什么没有内容的div会受到子元素的影响，以及如何处理它。

Answer 1

根据@Cabroe的评论 这是一个问题调用Collapsing margins。

问题发生在：

1. 内部和外部元素都显示为块。
2. 外部元素上没有设置边框，填充和溢出属性。
3. 外部元素的第一个/最后一个子元素的位置未设置为float或absolute，而剩余内容为空。

第一个/最后一个孩子的边界将合并给它的父母。

以下代码将解决问题

.box
    overflow: auto // Set overflow attribute to outer element
    height: 600px
    background-color: pink
    .ball
        width: 40px
        height: 40px
        +border-radius(100%)
        background-color: black
        margin-top: 50px