当父母没有边框时，CSS：边缘
正如你在这张照片中看到的，我在一个没有顶边的绿色div里面有一个橙色的div 。 橙色的div有一个30px上边距，但它也推动了绿色的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>
谢谢
您可以将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 。
你阅读这个文件： 框模型 – 保证金崩溃
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%; }
不知道这听起来多么hackish，但如何增加一个透明的边界？
