CSS：父母没有边框时的边际保留

正如您在this picture中看到的，我在橙色div内部看到一个绿色的div，没有上边框。橙色div有一个30px顶部边距，但它也推动了绿色div下降。当然，添加顶部边框可以解决这个问题，但我需要绿色div顶部无边框。我能做什么？CSS：父母没有边框时的边际保留

.body { 
 
\t border: 1px solid black; 
 
\t border-top: none; 
 
\t border-bottom: none; 
 
\t width: 120px; 
 
\t height: 112px; 
 
\t background-color: lightgreen; 
 
} 
 

 
.body .container { 
 
\t background-color: orange; 
 
\t height: 50px; 
 
\t width: 50%; 
 
\t margin-top: 30px; 
 
}

<div class="header">Top</div> 
 
<div class="body"> 
 
\t <div class="container">Box</div> 
 
</div> 
 
<div class="foot">Bottom</div>

感谢

来源

2009-09-08 Manny

你能详细说明所需的效果吗？您是否希望橙色容器中的文本显示为距顶部30像素，还是希望橙色容器的顶部显示为绿色容器顶部下方30像素？ – Mayo 2009-09-08 15:45:36

相关问题：http://stackoverflow.com/questions/315738/unexpected-margin-with-very-simple-html – mercator 2009-09-08 15:59:56

可能更适合http://doctype.com/ – Nobody 2010-08-03 10:40:18

您可以将overflow:auto添加到.body以防止边缘塌陷。看到http://www.w3.org/TR/CSS2/box.html#collapsing-margins

来源

2009-09-08 15:57:11 Fabian

woot，刚刚救了我，因为我的消失边缘而生气！ – 2009-10-27 17:43:13

我有同样的问题，因为我不希望有边界而让我疯狂，这解决了我的问题，感谢信息，链接帮助解释了为什么发生这种情况。 – jimplode 2011-10-28 14:45:21

边缘崩溃似乎是一个奇怪的事情，作为一个默认设置，任何人都有一个很好的例子，当你想使用它？ – opsb 2013-01-25 17:53:20

使用padding，而不是margin：

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

来源

2009-09-08 15:45:55

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

来源

2009-09-08 15:50:03

您阅读本文件： 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%; 
}

来源

2009-09-08 15:52:18 ranonE

你体验什么是外汇保证金崩溃。边距不指定元素周围的区域，而是元素之间的最小距离。

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

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

来源

2009-09-08 15:56:53 Guffa

不知道这听起来多么讨厌，但如何添加透明边框？

来源

2010-02-20 01:07:53 finferflu

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

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

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

来源

2010-05-10 01:06:26 alex

CSS：父母没有边框时的边际保留

回答

相关问题