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

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，它现在按预期工作:)不确定它是否适用于每个案例，YMMV。

Answer 5

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

Answer 6

您阅读本文档： Box model - Margin collapsing

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

不确定这听起来有多乱，但是如何添加透明边框？

CSS：父母没有边界的边缘

7 个答案: