我有一个包含另一个div(子)的div(父)。Parent是body中的第一个元素，没有特定的CSS样式。当我设置
.child
{
margin-top: 10px;
}
最终的结果是我的子的顶部仍然与父对齐。我的父结点向下移动10px，而不是子结点向下移动10px。
我的DOCTYPE被设置为XHTML Transitional。
我错过了什么?
编辑1 我的父母需要有严格定义的尺寸，因为它有一个背景，必须显示在它下面从上到下(像素完美)。所以不能在上面设置垂直边距。
编辑2 这种行为在FF、IE和CR上都是一样的。
这是正常的行为(至少在浏览器实现中)。边距不会影响子元素相对于父元素的位置，除非父元素有边距，在这种情况下，大多数浏览器会将子元素的边距添加到父元素的边距中。
为了得到你想要的行为，你需要:
.child {
margin-top: 0;
}
.parent {
padding-top: 10px;
}
.child中包含的元素的边缘正在折叠。
<html>
<style type="text/css" media="screen">
#parent {background:#dadada;}
#child {background:red; margin-top:17px;}
</style>
<body>
<div id="parent">
<p>&</p>
<div id="child">
<p>&</p>
</div>
</div>
</body>
</html>
在这个例子中，p从浏览器默认样式接收一个边距。浏览器默认的字体大小通常是16px。通过在#child上设置超过16px的顶部边距，你开始注意到它的位置移动。
在DIVs内的子元素中找到了一个边距的替代方法，您还可以添加:
.parent { overflow: auto; }
or:
.parent { overflow: hidden; }
这可以防止边际崩溃。边框和填充也是如此。 因此，你也可以使用以下方法来防止最高利润崩溃:
.parent {
padding-top: 1px;
margin-top: -1px;
}
2021年更新:如果你愿意放弃IE11支持，你也可以使用新的CSS结构display: flow-root。有关块格式上下文的全部细节，请参阅MDN Web文档。
按大众要求更新: 缩边距的全部意义在于处理文本内容。例如:
H1, h2, p, ul { margin-top: 1 em; margin-bottom: 1 em; 轮廓:1px蓝色虚线; ｝ Div{大纲:1px固体红色;｝ <标题>标题!< / h1 > < div class = " text " > < h2 >标题!< / h2 > < p > < / p >款 < / div > < div class = " text " > < h2 >标题!< / h2 > < p > < / p >款 < ul > <李>列表项李< / > < / ul > < / div >
由于浏览器折叠了页边距，因此文本将按照您所期望的方式显示，并且<div>包装器标记不会影响页边距。每个元素确保其周围有间距，但间距不会加倍。<h2>和<p>的裕度不会叠加，而是相互滑入(它们坍缩)。<p>和<ul>元素也是如此。
可悲的是，在现代设计中，当你明确地想要一个容器时，这个想法会让你感到不快。这在CSS中被称为新的块格式化上下文。溢出或边距技巧会给你这个。
我也有这个问题，但更喜欢防止负利润率黑客，所以我放了一个
<div class=“supercontainer”></div>
周围有填充而不是边距。当然，这意味着更多的性炎，但这可能是最干净的方法来做到这一点。
有趣的是，这里没有提到我最喜欢的解决方案:使用浮动。
html:
<div class="parent">
<div class="child"></div>
</div>
css:
.parent{width:100px; height:100px;}
.child{float:left; margin-top:20px; width:50px; height:50px;}
点击这里查看:http://codepen.io/anon/pen/Iphol
注意，如果你需要父节点上的动态高度，它也必须是浮动的，所以只需替换height:100px;通过浮动:左;
这对我来说很管用
.parent {
padding-top: 1px;
margin-top: -1px;
}
.child {
margin-top:260px;
}
http://jsfiddle.net/97fzwuxh/
在我知道正确答案之前，我找到了另一个解决方案，即向父元素添加透明边框。
你的盒子将使用额外的像素…
.parent {
border:1px solid transparent;
}
虽然所有的答案都解决了问题，但它们都伴随着权衡/调整/妥协，比如
floats, You have to float elements border-top, This pushes the parent at least 1px downwards which should then be adjusted with introducing -1px margin to the parent element itself. This can create problems when parent already has margin-top in relative units. padding-top, same effect as using border-top overflow: hidden, Can't be used when parent should display overflowing content, like a drop down menu overflow: auto, Introduces scrollbars for parent element that has (intentionally) overflowing content (like shadows or tool tip's triangle)
这个问题可以通过使用CSS3伪元素来解决，如下所示
.parent::before {
clear: both;
content: "";
display: table;
margin-top: -1px;
height: 0;
}
https://jsfiddle.net/hLgbyax5/1/
纯css解决方案
使用下面的代码将一个无内容的第一个子元素添加到无意移动的div前面:
.parent:before
{content: '';position: relative;height: 0px;width: 0px;overflow: hidden;white-space: pre;}
这种方法的优点是不需要更改任何现有元素的CSS，因此对设计的影响最小。在它旁边，添加的元素是伪元素，它不在dom树中。
伪元素的支持非常广泛:Firefox 3+、Safari 3+、Chrome 3+、Opera 10+和IE 8+。这可以在任何现代浏览器中工作(注意使用更新的::before，它在IE8中不受支持)。
上下文
如果元素的第一个子元素有一个margin-top，父元素将调整它的位置，以减少冗余边距。为什么?就像这样。
给定以下问题:
<style type="text/css">
div {position: relative;}
.parent {background-color: #ccc;}
.child {margin-top: 40px;}
</style>
<div class="parent"><!--This div moves 40px too-->
<div class="child">Hello world!</div>
</div>
您可以通过添加带有内容(例如简单空格)的子元素来修复它。但我们都不喜欢为设计问题添加空格。因此，可以使用空白属性来伪造内容。
<style type="text/css">
div {position: relative;}
.parent {background-color: #ccc;}
.child {margin-top: 40px;}
.fix {position: relative;white-space: pre;height: 0px;width: 0px;overflow: hidden;}
</style>
<div class="parent"><!--This div won't move anymore-->
<div class="fix"></div>
<div class="child">Hello world!</div>
</div>
其中位置:相对;确保固定的正确位置。和空格:pre;使您不必添加任何内容-如空白-到修复。和高度:0px;宽度:0px;溢出:隐藏;确保你永远都看不到解决办法。
你可能需要添加line-height: 0px;或者max-height: 0px;以确保高度实际上是零在古老的IE浏览器(我不确定)。还可以添加<!——dummy——>到旧的IE浏览器，如果它不工作。
简而言之，你可以用CSS完成所有这些(这就不需要向HTML dom树中添加实际的子节点):
<style type="text/css">
div {position: relative;}
.parent {background-color: #ccc;}
.child {margin-top: 40px;}
.parent:before {content: '';position: relative;height: 0px;width: 0px;overflow: hidden;white-space: pre;}
</style>
<div class="parent"><!--This div won't move anymore-->
<div class="child">Hello world!</div>
</div>
玩父母显示
.parent{
display: inline-block;
width: 100%;
}
or
.parent{ display: flex; }
你可以通过在伪元素display: flex;给父母。
.parent:before {
content: '';
display: flex;
}
另一种方法是将父节点的display属性设置为flow-root。
.parent {
display: flow-root;
}
边框解决方案很好，但不是最好的，因为它增加了元素的总宽度，即使是透明的
但是负边界宽度呢?不工作:(
但我们仍然可以用box-sizing属性来实现 使边界向负方向移动
.parent{
border:5px solid transparent;
box-sizing: border-box;
}
.child{
margin-top:5px;
}
注意，如果你想要10px的上边距，你必须只添加5px的边距，因为5px的上边距仍然会产生影响，这个原因是为了防止崩溃问题。
是关于保证金崩溃的。
块的顶部和底部边距有时会合并(折叠)为单个边距，其大小是单个边距中最大的(如果它们相等，则仅为其中之一)，这种行为称为边距折叠。
根据具体情况，有几种解决方案。 一种解决方案是改变子节点的显示模式。
.child {
display: inline-block;
}
也很高兴知道。边距收缩不适用于柔性容器或网格容器。
.parent {
display: flex;
flex-direction: column;
}
或者使用父元素的填充而不是子元素的边缘。改变溢出或浮动属性也会有所帮助。或者绝对位置。这取决于你的布局。
