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＃塌陷-边距

Answer 2

您体验什么是外汇保证金崩溃。余量不围绕的元素指定一个区域，而是元件之间的最小距离。

作为绿色容器没有任何边界或填充，没有什么可包含橙色元件的裕量。缘用于顶部元件和就好像绿色容器将具有余量橙色元件之间。

使用在绿色容器代替橙色元件上的裕度的填充。

Answer 3

使用padding代替margin：

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

Answer 4

不知道这是否会在你的情况下工作，但我只是解决了这个具有以下CSS属性

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

#element正在下推，因为它的第一个子元素有一个margin-top: 30px。有了这个CSS，它现在可以按预期:)不知道是否会为每一个案件的工作，情况因人而异。

Answer 5

可以要么在绿色框添加padding-top: 30，使用相对定位与top: 30px橙色框，或浮在橙色框，并使用相同margin-top: 30px。

Answer 6

您阅读本文件： 盒模型 - 保证金折叠

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%;
}

Answer 7

不知道如何hackish的这个声音，而是加入了透明边框怎么样？