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

Question

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

jsFiddle 示例

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 上边距正在折叠。

一个简单的解决方法是制作外层，display:inline-block您应该放在padding:10px外层上，而内层上没有边距。