CSS:父母没有边界的边缘

Question

正如你在这张照片中看到的那样,我在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

Answer 2

您遇到的是保证金崩溃.边距不指定元素周围的区域,而是指定元素之间的最小距离.

由于绿色容器没有任何边框或填充,因此没有任何内容可以包含橙色元素的边距.在顶部元素和橙色元素之间使用边距,就像绿色容器具有边距一样.

在绿色容器中使用填充而不是橙色元素上的边距.