CSS：父级没有边框时的边距顶部答案

【问题标题】：CSS: Margin-top when parent's got no borderCSS：父级没有边框时的边距顶部
【发布时间】：2016-01-19 17:35:21
【问题描述】：

正如您在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>

谢谢

【问题讨论】：

你能详细说明想要的效果吗？您希望橙色容器中的文本显示在距顶部 30 像素的位置，还是希望橙色容器的顶部显示在距绿色容器顶部 30 像素的位置？
相关问题：stackoverflow.com/questions/315738/…
可能更适合doctype.com
相关：clear and collapse fix.

标签： css border margin collapse

【解决方案1】：

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

【讨论】：

哇，刚刚让我免于因边缘消失而发疯！
我遇到了同样的问题，因为我不希望有边界而让我发疯，这解决了我的问题，感谢您提供的信息，并且该链接有助于解释为什么会发生这种情况。
默认设置边距折叠似乎是一件奇怪的事情，有人有一个很好的例子说明你什么时候想使用它吗？
关于边距折叠的好文档：developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

使用padding 代替margin：

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

【讨论】：

【解决方案4】：

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

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

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

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案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%;
}

【讨论】：

【解决方案7】：

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

【讨论】：