55

正如您在这张图片中看到的那样，我在没有顶部边框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>

谢谢

4

7 回答 7

92

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

于 2009-09-08T15:57:11.197 回答
9

您所经历的是边距崩溃。边距不指定元素周围的区域，而是指定元素之间的最小距离。

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

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

于 2009-09-08T15:56:53.710 回答
1

使用padding代替margin：

.body .container {
    ...
    padding-top: 30px;
}
于 2009-09-08T15:45:55.133 回答
1

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

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

#element被下推是因为它的第一个子元素有一个margin-top: 30px. 有了这个 CSS，它现在可以按预期工作了 :) 不确定它是否适用于所有情况，YMMV。

于 2010-05-10T01:06:26.917 回答
0

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

于 2009-09-08T15:50:03.537 回答
0

您阅读了此文档： 盒子模型 - 边距折叠

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%;
}
于 2009-09-08T15:52:18.010 回答
0

不知道这听起来有多骇人听闻，但是添加透明边框怎么样？

于 2010-02-20T01:07:53.990 回答