子元素上的边距移动父元素
我有一个div（父），其中包含另一个div（子）。Parent是第一个body没有特定CSS样式的元素。当我设定
.child
{
margin-top: 10px;
}
最终结果是我的孩子的顶部仍然与父母对齐。我的父母没有将孩子向下移动10px，而是将其向下移动10px。
我DOCTYPE的设定为XHTML Transitional。
我在这里想念什么？
编辑1
我的父母需要具有严格定义的尺寸，因为它的背景必须从上到下显示（像素完美）。因此，在其上设置垂直边距是不可行的。
编辑2
此行为在FF，IE和CR上相同。
第2344篇《子元素上的边距移动父元素》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点
为了防止“父级父级”使用“ div子级”的边距：
在父级中使用以下CSS：
在知道正确答案之前，我找到了另一种解决方案，就是为父元素添加透明边框。
您的盒子将使用额外的像素...
.parent {
border:1px solid transparent;
}
有趣的是，这里没有提到我最喜欢的解决方案：使用浮点数。
的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;为float:left;
我也遇到了这个问题，但更希望防止出现负利润黑客攻击，因此我提出了
<div class="supercontainer"></div>
周围都有填充而不是边距。当然，这意味着更多的神经，但这可能是正确完成此操作的最干净的方法。
其中margin包含的元素.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正在margin从浏览器接收默认样式。浏览器的默认font-size值通常为16px。通过设置margin-top大于16px的像素，#child您开始注意到它的位置移动。
我发现，在.css内部，如果将div元素的display属性设置为inline-block，则可以解决此问题。保证金将按预期工作。
这就是对我有用的
.parent {
padding-top: 1px;
margin-top: -1px;
}
.child {
margin-top:260px;
}
父元素至少 在子元素之前不得为空。
display:inline-block为子元素添加样式
尽管所有答案都可以解决问题，但它们还是需要权衡/调整/妥协，例如
floats，您必须浮动元素border-top，这会将父级向下推至少1px，然后应通过-1px向父级元素本身引入边距来进行调整。当父级已经具有margin-top相对单位时，这可能会产生问题。padding-top，与使用效果相同 border-topoverflow: hidden，当父母应该显示溢出的内容（如下拉菜单）时不能使用overflow: auto，为内容有意溢出的父元素（如阴影或工具提示的三角形）引入滚动条可以通过使用CSS3伪元素来解决此问题，如下所示
.parent::before {
clear: both;
content: "";
display: table;
margin-top: -1px;
height: 0;
}
这是正常现象（至少在浏览器实现中）。保证金不会影响孩子相对于其父级的位置，除非父级具有填充，在这种情况下，大多数浏览器会将子级的余量添加到父级的填充中。
要获得所需的行为，您需要：
.child {
margin-top: 0;
}
.parent {
padding-top: 10px;
}
在子元素中在DIV中有边距的情况下找到了替代方法，您还可以添加：
.parent { overflow: auto; }
要么：
.parent { overflow: hidden; }
这样可以防止边距崩溃。边框和填充相同。因此，您还可以使用以下内容来防止最高利润崩溃：
.parent {
padding-top: 1px;
margin-top: -1px;
}
根据受欢迎的要求进行更新：页 边空白的全部要点是处理文本内容。例如：
<style type="text/css">
h1, h2, p, ul {
margin-top: 1em;
margin-bottom: 1em;
}
</style>
<h1>Title!</h1>
<div class="text">
<h2>Title!</h2>
<p>Paragraph</p>
</div>
<div class="text">
<h2>Title!</h2>
<p>Paragraph</p>
<ul>
<li>list item</li>
</ul>
</div>
由于浏览器会折叠边距，因此文本将如您期望的那样显示，并且<div>包装标签不会影响边距。每个元素确保其周围有间距，但间距不会加倍。的边距<h2>，并<p>不会增加，但陷入对方（他们崩溃）。<p>和<ul>元素也会发生同样的情况。
Sadly, with modern designs this idea can bite you when you explicitly want a container. This is called a new block formatting context in CSS speak. The overflow or margin trick will give you that.
相似问题
问题类别
如果合适，使用
top代替margin-top是另一种可能的解决方案。