子元素的边距移动父元素
我有一个包含另一个div （ 子 ）的div （ 父 ）。 Parent是body的第一个没有特定CSS样式的元素。 当我设置
.child
{
margin-top: 10px;
}
最终的结果是，我的孩子的顶部仍然与父母一致。 而不是孩子向下移动10px，我的父母向下移动10px。
我的DOCTYPE被设置为XHTML Transitional 。
我在这里错过了什么？
编辑1
我的父母需要严格定义维度，因为它的背景必须从上到下显示（像素完美）。 所以设置垂直边界是不行的 。
编辑2
这种行为在FF，IE和CR上都是一样的。
在包含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>元素也是如此。
可悲的是，用现代设计这个想法可以咬你，当你明确需要一个容器。 这在CSS中被称为新块格式化上下文。 overflow或保证金诡计会给你。
这是正常行为（至少在浏览器实现中）。 保证金不影响孩子相对于父母的地位，除非父母有填充，在这种情况下，大多数浏览器会将孩子的保证金添加到父母的填充。
要获得您想要的行为，您需要：
.child {
margin-top: 0;
}
.parent {
padding-top: 10px;
}
虽然所有的答案都可以解决这个问题，但它们会带来诸如权衡/调整/妥协等
floats ，你必须浮动元素 border-top ，这会将父元素向下推动至少1px，然后应该通过向父元素本身引入-1px边距来进行调整。 如果父母已经在相对单位中拥有margin-top ，这会造成问题。 padding-top ，与使用border-top效果相同 overflow: hidden ，父级应显示溢出内容时不能使用，如下拉菜单 overflow: auto ，为父元素引入滚动条，该元素具有（故意）溢出的内容（如阴影或工具提示的三角形） 这个问题可以通过使用CSS3伪元素来解决，如下所示
.parent::before {
clear: both;
content: "";
display: table;
margin-top: -1px;
height: 0;
}
https://jsfiddle.net/hLgbyax5/1/
链接地址: http://www.djcxy.com/p/15387.html