为什么顶部和底部边距的CSS样式不适用于内部div

Question

很奇怪为什么10px的顶部和底部边距不会应用于下面代码段中的内部div。如果我将内部显示属性设置为“inline-block”，它将按预期应用顶部/底部边距。

jsFiddle example

HTML：

<div class="outer">
    <div class="inner">
        My content...
    </div> 
</div> 

CSS：

.outer {
    background-color: lightgrey;
}   
.inner {
    background-color: green;
    padding: 50px;
    width: 600px;
    margin:10px;
    display: block; /* No top, bottom margins applied.  Does apply them with "inline-block".  Why? */ 
}

Answer 1

.inner上边距为collapsing。

一个简单的解决方法是使外部display:inline-block你应该将padding:10px放在外部而不是内部边缘。