我有一个包含另一个div(子)的div(父)。Parent是body中的第一个元素，没有特定的CSS样式。当我设置
.child
{
margin-top: 10px;
}
最终的结果是我的子的顶部仍然与父对齐。我的父结点向下移动10px，而不是子结点向下移动10px。
我的DOCTYPE被设置为XHTML Transitional。
我错过了什么?
编辑1 我的父母需要有严格定义的尺寸，因为它有一个背景，必须显示在它下面从上到下(像素完美)。所以不能在上面设置垂直边距。
编辑2 这种行为在FF、IE和CR上都是一样的。
当前回答
.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的顶部边距，你开始注意到它的位置移动。
其他回答
这对我来说很管用
.parent {
padding-top: 1px;
margin-top: -1px;
}
.child {
margin-top:260px;
}
http://jsfiddle.net/97fzwuxh/
为子元素添加样式显示:inline-block
有趣的是，这里没有提到我最喜欢的解决方案:使用浮动。
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;通过浮动:左;
我也有这个问题，但更喜欢防止负利润率黑客，所以我放了一个
<div class=“supercontainer”></div>
周围有填充而不是边距。当然，这意味着更多的性炎，但这可能是最干净的方法来做到这一点。
在我知道正确答案之前，我找到了另一个解决方案，即向父元素添加透明边框。
你的盒子将使用额外的像素…
.parent {
border:1px solid transparent;
}
