子元素的边距移动父元素

Question

子元素的边距移动父元素

我有一个div (父母)包含另一个div (儿童)。父元素是body没有特别的CSS样式。当我开始

.child
{
    margin-top: 10px;
}

最终的结果是，我的孩子的顶部仍然与父母保持一致。我的父母不是向下移动10 px，而是向下移动10 px。

我的DOCTYPE设置为XHTML Transitional.

我在这里错过了什么？

编辑1
我的父级需要严格定义尺寸，因为它有一个必须从上到下显示的背景(像素完美)。因此，在其上设置垂直边距是不去.

编辑2
这种行为在FF、IE以及CR上都是一样的。

Answer 1

找到了另一种选择在div中具有边距的子元素您还可以添加：.parent&nbsp;{&nbsp;overflow:&nbsp;auto;&nbsp;}或：.parent&nbsp;{&nbsp;overflow:&nbsp;hidden;&nbsp;}这将防止将页边距设置为塌陷..边框和填充物也是这样做的。因此，您还可以使用以下方法防止上限崩溃：.parent&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;padding-top:&nbsp;1px; &nbsp;&nbsp;&nbsp;&nbsp;margin-top:&nbsp;-1px; }按大众要求更新：折叠边距的全部要点是处理文本内容。例如：<style&nbsp;type="text/css"> &nbsp;&nbsp;&nbsp;&nbsp;h1,&nbsp;h2,&nbsp;p,&nbsp;ul&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin-top:&nbsp;1em; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin-bottom:&nbsp;1em; &nbsp;&nbsp;&nbsp;&nbsp;}</style><h1>Title!</h1><div&nbsp;class="text"> &nbsp;&nbsp;&nbsp;&nbsp;<h2>Title!</h2> &nbsp;&nbsp;&nbsp;&nbsp;<p>Paragraph</p></div><div&nbsp;class="text"> &nbsp;&nbsp;&nbsp;&nbsp;<h2>Title!</h2> &nbsp;&nbsp;&nbsp;&nbsp;<p>Paragraph</p> &nbsp;&nbsp;&nbsp;&nbsp;<ul> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li>list&nbsp;item</li> &nbsp;&nbsp;&nbsp;&nbsp;</ul></div>因为浏览器会折叠边距，所以文本将如您所期望的那样出现，并且<div>包装标签不会影响页边距。每个元素确保它周围有间距，但间距不会加倍。的边缘<h2>和<p>不会加起来，但会相互渗透(它们会崩溃)。同样的情况发生在<p>和<ul>元素。可悲的是，在现代设计中，当你明确地想要一个容器时，这个想法会咬你。这叫做新的块格式上下文用CSS说。这个overflow或者毛边戏法会给你这个机会。

Answer 2

这是正常行为(至少在浏览器实现中)。边距不影响子节点相对于其父节点的位置，除非父节点有填充，在这种情况下，大多数浏览器都会将子节点的边距添加到父节点的填充中。为了得到你想要的行为，你需要：.child&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;margin-top:&nbsp;0; } .parent&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;padding-top:&nbsp;10px; }