CSS:父级没有边框时的边距顶部

Question

正如您在 this picture 中看到的那样，我在没有上边框的绿色 div 中有一个橙色 div 。橙色 div 的上边距为 30px，但它也将绿色 div 向下推。当然，添加顶部边框可以解决问题，但我需要绿色 div 顶部无边框。我能做什么？

.body {
    border: 1px solid black;
    border-top: none;
    border-bottom: none;
    width: 120px;
    height: 112px;
    background-color: lightgreen;
}

.body .container {
    background-color: orange;
    height: 50px;
    width: 50%;
    margin-top: 30px;
}

<div class="header">Top</div>
<div class="body">
    <div class="container">Box</div>
</div>
<div class="foot">Bottom</div>

Answer 1

您可以将 overflow:auto 添加到 .body 以防止边距折叠。参见 http://www.w3.org/TR/CSS2/box.html#collapsing-margins