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

您所遇到的是边距折叠。边距并不指定元素周围的区域，而是指定元素之间的最小距离。
由于绿色容器没有任何边框或填充，因此没有任何内容可以包含橙子元素的边距。边距在顶部元素和橙色元素之间使用，就像绿色容器具有边距一样。
在绿色容器中使用填充，而不是在橙子元素上使用边距。

使用padding而不是margin：

.body .container {
    ...
    padding-top: 30px;
}

不确定这是否适用于您的情况，但我刚刚用以下CSS属性解决了这个问题

#element {
    padding-top: 1px;
    margin-top: -1px;
}

#element被下推，因为它的第一个子元素有一个margin-top: 30px。有了这个CSS，它现在可以正常工作了：）不确定它是否对每种情况都有效，YMMV。

您可以在绿色框上添加padding-top: 30，在橙子框上使用top: 30px的相对定位，或者浮动橙色框并使用相同的margin-top: 30px。

您阅读此文档：Box模型-边缘折叠
CSS

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

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

不知道这听起来有多俗气，但是添加一个透明边框怎么样？